如何知道所有ajax調用何時完成

Question

我有一個包含行的表樣式頁面。每一行都有一個複選框。我可以選擇所有/許多複選框，然後單擊「提交」，每行的Jquery ajax調用是什麼。

基本上我有一個每行的表單，我遍歷所有檢查的行並提交表單，它執行jquery ajax調用。

所以我有一個按鈕，做：

 $("input:checked").parent("form").submit(); 

然後每行有：

  <form name="MyForm<%=i%>" action="javascript:processRow(<%=i%>)" method="post" style="margin:0px;"> 
       <input type="checkbox" name="X" value="XChecked"/> 
       <input type="hidden" id="XNumber<%=i%>" name="X<%=i%>" value="<%=XNumber%>"/> 
       <input type="hidden" id="XId<%=i%>" name="XId<%=i%>" value="<%=XNumber%>"/> 
       <input type="hidden" id="XAmt<%=i%>" name="XAmt<%=i%>" value="<%=XAmount%>"/> 
       <input type="hidden" name="X" value="rXChecked"/> 
      </form> 

這種形式提交給processRow：

function processRow(rowNum) 
    { 
     var Amount = $('#XAmt'+rowNum).val(); 
     var XId = $('#XId'+rowNum).val(); 
     var XNum = $('#OrderNumber'+rowNum).val(); 
     var queryString = "xAmt=" + "1.00" + "&xNumber=" + OrdNum + "&xId=" + xId; 


     $('#coda_'+rowNum).removeClass("loader"); 
     $('#coda_'+rowNum).addClass("loading"); 


     $.ajax({ 
      url: "x.asp", 
      cache: false, 
      type: "POST", 
      data: queryString, 
      success: function(html){ 
      $('#result_'+rowNum).empty().append(html); 
      $('#coda_'+rowNum).removeClass("loading"); 
      $('#coda_'+rowNum).addClass("loader"); 
      } 
     }); 
    } 

我想知道是什麼，從這裏可以看出我的所有Ajax調用是否完成。原因是希望在所有這些調用發生時啓用/禁用提交按鈕。

謝謝，請注意，由於應用程序的敏感性，我不得不打亂我的變量名，所以很多可能會被複制。

Answer 1

最簡單的辦法

最簡單的方法是使用.ajaxStop() event handler：

$(document).ajaxStop(function() { 
    // place code to be executed on completion of last outstanding ajax call here 
}); 

難的方法

您也可以手動檢測是否所有Ajax調用仍然有效：

創建包含活動Ajax連接數的變量：

var activeAjaxConnections = 0; 

剛剛開放這個變量 在success部分檢查

$.ajax({ 
    beforeSend: function(xhr) { 
    activeAjaxConnections++; 
    }, 
    url (...) 

如果該變量等於零（如果是的話，最後的連接已完成）新的Ajax連接增量

success: function(html){ 
    activeAjaxConnections--; 
    $('#result_'+rowNum).empty().append(html); 
    $('#coda_'+rowNum).removeClass("loading"); 
    $('#coda_'+rowNum).addClass("loader"); 
    if (0 == activeAjaxConnections) { 
    // this was the last Ajax connection, do the thing 
    } 
}, 
error: function(xhr, errDesc, exception) { 
    activeAjaxConnections--; 
    if (0 == activeAjaxConnections) { 
    // this was the last Ajax connection, do the thing 
    } 
} 

前

正如你所看到的，我也添加了檢查返回錯誤

Answer 2

一個簡潔的解決方案是使用;

$("body").ajaxStop(function() { 
    //Your code 
}); 

欲瞭解更多信息，請查看jQuery。在http://api.jquery.com/ajaxStop/

Answer 3

也許ajaxStop功能：

jQuery.active == 0 

被盜來源：

http://artsy.github.com/blog/2012/02/03/reliably-testing-asynchronous-ui-w-slash-rspec-and-capybara/

更多信息StackOverflow上：

jQuery.active function

Answer 4

如何只簡單地使用if？

success: function(html){ 
    if(html.success == true){ 
      $('#result_'+rowNum).empty().append(html); 
      $('#coda_'+rowNum).removeClass("loading"); 
      $('#coda_'+rowNum).addClass("loader"); 

      } 
    }