如何知道所有的ajax调用完成

我有一个表格样式页面的行。 每一行都有一个checkbox。 我可以select所有/许多checkbox，然后单击“提交”，每行是一个Jquery ajax调用。

基本上我有一个表格，每一行，我遍历所有检查的行，并提交表单jQuery的Ajax调用。

所以我有一个button：

$("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调用是否完成。 原因是想在所有这些调用正在进行时启用/禁用提交button。

谢谢，请注意，由于应用程序的敏感性，我不得不打乱我的variables名，所以它们中的很多可能会被复制。

Answer 1

简单的方法

最简单的方法是使用.ajaxStop()事件处理程序 ：

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

困难的方式

您也可以手动检测是否有任何Ajax调用仍然有效：

创build一个包含活动Ajax连接数的variables：

 var activeAjaxConnections = 0; 

就在打开新的Ajax连接之前增加那个variables

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

在success部分检查该variables是否等于零（如果是这样，最后一次连接已完成）

 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

一个整洁的解决scheme将是使用;

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

有关更多信息，请查看http://api.jquery.com/ajaxStop/上的jQuery .ajaxStop函数

Answer 3

也许：

 jQuery.active == 0 

被盗来自：

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

有关StackOverflow的更多信息：

jQuery.active函数

Answer 4

如果只是简单地使用， 如果 ？

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