如何做多個Ajax調用，並在每個之後更新UI

我正在爲一些大型查詢製作一個腳本，並避免在PHP端超時，另外給用戶一些輸入，我試圖使它大部分在jQuery上。如何做多個Ajax調用，並在每個之後更新UI

所以它的工作原理如下：首先用戶在select上選擇一條記錄。當他點擊按鈕時，我得到了一個ajax調用來從json格式的記錄中獲取我需要的細節。

隨着響應，我得到了一個循環，使得來自該第一次調用的每個結果的ajax調用。

如果我將異步設置爲false，它可以工作，但瀏覽器會凍結，因爲有幾個ajax調用。那麼有沒有辦法通過關閉async來更新ui？

我的意思是，當我在循環內進行ajax調用時，需要將async設置爲off的事實對我來說沒有任何意義。它可以同時進行多次調用，我很好，但爲什麼它沒有得到該循環內的當前索引，除非我將async設置爲false？它繼續使用第一個索引。

$("#button_copy").live('click', function(){ 
     $('#button_copy').attr("disabled", true); 
     id = $('#select').val(); 
     $.ajax({ 
      type: "POST", 
      url: "query1.php", 
      dataType: 'json', 
      async:false, 
      cache: false, 
      data: 'id=' + id, 
      success: function(data) { 
       var total1 = data['records'].length; 
       $("#console").append('Total query 1: ' + total1 + '<br />'); 
       for (var i in data['records']) { 
        $.ajax({ 
         type: "POST", 
         url: "query2.php", 
         dataType: 'json', 
         async:false, 
         cache: false, 
         data: 'id=' + data['records'][i].id, 
         success: function(data2) { 
          var total2 = data2['records2'].length; 
          $("#console").append('Total of query 2 from ' + data['records'][i].person + ': ' + total2 + '<br />'); 
         }, 
         error: function(data2) { 
          console.log(data2); 
         } 
        }); 
        var percentprogress1 = (i/total1) * 10000; 
        $('#progressbar1').css('width',percentprogress1 + '%'); 
       } 
      }, 
      error: function(data) { 
       console.log(data); 
      } 
     }); 
    });

來源

2013-06-04 Paulo Manrique

將您的循環更改爲for（var i = 0; i Kippie

當我這樣做的時候，它甚至沒有得到數組上的[0]。我改變了i = 1; <（總共1 -1），它忽略了一些記錄，但結果相同，它只是在所有ajax調用中使用數組上的第一個值。 –

你應該只使用一個ajax請求，它將只返回所有結果一次 –

因爲你想使用i回調中你會得到的問題，而是由當時的回調被調用i不再具有其原始值。你也不應該在數組上使用for ... in - 只能在對象上使用。

而不是使用任何類型的for循環的，我建議以下內容，其中每個連續的AJAX調用上觸發前一個完成：

$.ajax(...).done(function(data) { 

    var all = data.records; 
    (function next() { 
     var record = all.shift(); 
     if (record) { 
      $.post(...).done(next, function(res) { 
       // process inner result 
       // update UI, etc 
       ... 
      }); 
     } 
    })();  // invoke immediately 

});

請注意，我用「延期」，而不是語法在兩個AJAX調用中傳遞success:處理程序。

裏面的「僞遞歸」循環請注意，我用.done(next, ...)這使得循環，開始下一個AJAX調用並行當前調用的結果的處理。

來源

2013-06-04 09:36:56 Alnitak

這是完美的！非常感謝您的親切先生。 –

我剛碰到類似的問題。我在while循環中運行了一系列Ajax請求。一些電話沒有被製作！這是殺了我！我的結論是我的瀏覽器 - 谷歌瀏覽器 - 忽略了「重複」請求。

看看這個僞代碼：

while (i < ajaxCallArray.length) { 
    currentAjaxObject = ajaxCallArray[i]; 
    ajaxPost = $.post(currentAjaxObject.url, function(data) { 
    //response data needs to go into a function such that each request gets its own "data" variable created.otherwise it just overwrites data!! 
    processAjaxResponse(data, currentAjaxObject); 
     },"json"); 
i++; 
}

如果ajaxCallArray[0].url = "http://www.google.com"，ajaxCallArray[1].url = "http://www.google.com"，並ajaxCallArray[2].url = "http://www.google.com"瀏覽器將只實際上使1個通話！

解決辦法：你，即使你不使用這些URL參數做這樣的事情ajaxCallArray[0].url = "http://www.google.com?count=0"，ajaxCallArray[1].url = "http://www.google.com?count=0"和ajaxCallArray[2].url = "http://www.google.com?count=0"，只是把一些工作，使他們不同。這樣瀏覽器將處理所有的呼叫，即使它們是即時完成的。

希望這有助於！

來源

2013-09-01 18:39:55 Federico

如何做多個Ajax調用，並在每個之後更新UI

回答

相關問題