jQuery從多個ajax調用中收集

Question

我正在嘗試使用jquery和ajax從多個URL收集數據，然后從中創建內容。 但是，我必須丟失一些東西，因為它似乎不起作用。

我有這樣的事情：

var html = "";
function loadByUrl(url) {
    $.ajax({
        url: url, 
        dataType: 'json',
        async: false,
        success: function(json) {
          $.each(json.data.children, function(i,item){
            if( someCondition ) {
                $(item.data).appendTo("#content");
            } else {
                html += "<div>" + item.data + "</div>"; 
            }
          }
        }
    });
}

loadByUrl("http://fake1.com");
loadByUrl("http://fake2.com");
loadByUrl("http://fake3.com");
$(html).appendTo("#content");

基本上，如果滿足某些條件，那么我將立即添加內容，否則，我想將其與所有其他“已保存”內容一起添加到內容的末尾。

我想做的事可能嗎？ 如果是這樣，怎么辦？

Answer 1

新答案：

我會以不同的方式處理這個問題。 而不是使用async: false （通常不贊成使用它（在jQuery的最新版本中甚至已棄用）），我將使用$.when實現相同的效果。

// return a promise
function loadByUrl(url) {
    return $.ajax({
        url: url, 
        dataType: 'json'
    });
}

// handle processing the data in a separate function
function processData(data) {
    var result = '';
    $.each(data.children, function(i,item){
        if( someCondition ) {
             $(item.data).appendTo("#content");
        } else {
            result += "<div>" + item.data + "</div>"; 
        }
    }
    return result;
}

// use when to ensure all of the AJAX requests execute before
// doing anything with their results
$.when(loadByUrl("http://fake1.com"), loadByUrl("http://fake2.com"), loadByUrl("http://fake3.com")).done(function(fake1, fake2, fake3) {
    // this function is called after all three AJAX promises are resolved
    var html = '';

    html += processData(fake1[0]);
    html += processData(fake2[0]);
    html += processData(fake3[0]);

    $(html).appendTo("#content");
});

原始答案：

問題是$.ajax是異步的。 嘗試替換此行：

html += "<div>" + item.data + "</div>";

有了這個：

$("<div>" + item.data + "</div>").appendTo("#content");

Answer 2

編輯：我只是看到這些是同步的請求。 如果您想堅持同步請求，我想您想看看這個答案 。 我從未使用過sync選項，但是我敢肯定您沒有指定回調函數。 如果您不介意切換到異步，我認為答案底部的代碼仍然可以使用。

您嘗試在兩個地方將此內容附加到頁面上。 首先，有第10行：

$(item.data).appendTo("#content");

假設您以自己喜歡的方式編寫條件，那應該可以正常工作。 第二位是最后一行：

$(html).appendTo("#content");

這將在加載內容之前觸發，將空白的html字符串附加到文檔中。 訣竅是要理解，AJAX請求和第二個請求是立即執行的，但是直到服務器將請求的信息發送回之前，將結果加載到html中的success函數才會觸發。

我如何解決此問題的答案取決於在第9行中檢查的是哪種情況。如果可以通過事件偵聽器檢測到某種情況，則我將重寫success ，除了將結果存儲在全局html變量html什么也不做，然后編寫第二個事件滿足條件時觸發的偵聽器，將html的內容附加到目標中，然后清除它。 但是，如果事件監聽器無法檢測到該情況，則將您的代碼更改為以下內容：

var html = "";
function loadByUrl(url) {
    $.ajax({
        url: url, 
        dataType: 'json',
        success: function(json) {
            $.each(json.data.children, function(i,item){
                html += "<div>" + item.data + "</div>";
                if( someCondition ) {
                    $(html).appendTo("#content");
                }
            });
        });
}

loadByUrl("http://fake1.com");
loadByUrl("http://fake2.com");
loadByUrl("http://fake3.com");

如果您希望能夠在完成fake3.com加載后強制其追加，請使用閉包執行類似的操作：

var html = "";
function successFunction(force)
{
    return function(json) {
        $.each(json.data.children, function(i,item)
        {
            html += "<div>" + item.data + "</div>";
            if (force || someCondition)
            {
                $(html).appendTo("#content");
            }
        });
    };
}
function loadByUrl(url,force) {
    $.ajax({
        url: url, 
        dataType: 'json',
        success: successFunction(force)});
}

loadByUrl("http://fake1.com",false);
loadByUrl("http://fake2.com",false);
loadByUrl("http://fake3.com",true); // true => force appension.

Answer 3

如果它不是Nir指出的跨域調用，請嘗試在您的ajax調用中使用“ .done”，然后在其中的回調函數中進行追加。

就像是

$.ajax({
   your call setup and call
}).done(function(data) {
   console.log('Data:',data);  
   //your code to append the data 
}

這是可能的，因為“ .done”是因為jQuery 1.5中$ .ajax（）返回的jqXHR對象實現了Promise模式。 您可以在http://api.jquery.com/jQuery.ajax/中查看文檔。