jQuery完成動態拉取函數調用時

Question

我有以下代碼：

在site-code.js中

....

var ajaxContentFunc = $(origin).data("modal-content-handler");

$.when(window[ajaxContentFunc]()).done(function (resp) {
    kModal.showContent(resp);
});

在另一個文件中，我具有以下標記和功能

<a href="#" data-modal-content-handler="ajaxContentGeneration">Click Me</a>

....

function ajaxContentGeneration() {

    var aProm = $.ajax({

        url: "tests/ajax/AjaxTest.aspx",
        data: { exampleType: "modal-ajax" },
        dataType: "html"


    });


    aProm.done(function (data) {

        console.log("Ajax Loaded!");
        var content = $(data).find("#ajax-content");

        return aProm;

    });


}

我需要將ajaxContentGeneration（可能的方法）的結果填充到變量中，以發送到showContent或換句話說：

1）從標記的modal-content-handler數據屬性中提取ajaxContentFunction Name

2）調用函數（在這種情況下為ajaxContentGeneration）

3）等待函數的ajax完成並返回生成的數據（在這種情況下為html）

4）完成后，將該值傳遞給kModal.showContent（---- Here ----）;

但是目前我得到：

1）正確拉ajaxContentFunctionName

2）調用函數（ajaxContentGeneration（）函數）

3）調用kModal.showContent（undefined）。 這被過早調用是因為deferred沒有正確地等待函數調用完成（在ajax完成之后）。

4）Ajax完成

我在哪里弄糟？

Answer 1

據我所知，您在那里95％。

使用.then()而不是.done()並返回$.ajax().then()返回的promise：

function ajaxContentGeneration() {
    return $.ajax({
        url: "tests/ajax/AjaxTest.aspx",
        data: { exampleType: "modal-ajax" },
        dataType: "html"
    }).then(function (data) {
        return $(data).find("#ajax-content"); // this will return jQuery
        // return $(data).find("#ajax-content").html(); // this will return html
    });
}

您可能還可以從頂級調用中清除$.when() ：

var ajaxContentFunc = $(origin).data("modal-content-handler");
window[ajaxContentFunc]().then(function (resp) {
    // `resp` is whatever was returned by the `return $(data).find()...` statement above
    kModal.showContent(resp);
});

我說的原因“可能”是$.when()是必要的，如果返回值的（不承諾返流）功能可以替代稱為ajaxContentGeneration()

Answer 2

另一種方法是：

// should really be renamed...
function ajaxContentGeneration(){
    return $.ajax({
        url      : "tests/ajax/AjaxTest.aspx",
        data     : { exampleType: "modal-ajax" },
        dataType : "html"
    })
}

別的地方：

var ajaxContentFunc = $(origin).data("modal-content-handler");

window[ajaxContentFunc]()
    .done(function(RES){
        kModal.showContent( $(RES).find("#ajax-content") );
    });

因此， ajaxContentGeneration函數的功能將是返回一個AJAX ajaxContentGeneration ，而不是在其內部進行操作，而是在需要的地方進行操作（ 從響應中獲取#ajax-content元素 ）

---

請注意，整個過程都是對JS設計的不好實踐，您應該避免在window對象的頂部使用函數，而應在另一個對象上使用。