jQuery 如何知道所有 ajax 调用何时完成

How to know when all ajax calls are complete

提问by Brian G

I have a table style page with rows. Each row has a checkbox. I can select all/many checkboxes and click "submit" and what is does is a Jquery ajax call for each row.

我有一个带有行的表格样式页面。每行都有一个复选框。我可以选择所有/许多复选框并单击“提交”，然后对每一行进行 Jquery ajax 调用。

Basically I have a form for each row and I iterate over all the checked rows and submit that form which does the jquery ajax call.

基本上我每行都有一个表单，我遍历所有选中的行并提交执行 jquery ajax 调用的表单。

So I have a button that does:

所以我有一个按钮可以：

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

Then each row has:

然后每一行有：

            <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>

This form submits to processRow:

此表单提交给 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");
          }
        });
   }

What I wanted to know is, from this is there a way I can tell if all my Ajax calls are complete. Reason being that want to enable/disable the submit button while all these calls are taking place.

我想知道的是，从这里有一种方法可以判断我的所有 Ajax 调用是否已完成。原因是想要在所有这些调用发生时启用/禁用提交按钮。

Thanks and please note that I had to mangle my variable names due to the sensitivity of the application, so many of them may be duplicated.

谢谢，请注意，由于应用程序的敏感性，我不得不修改我的变量名称，因此其中许多可能会重复。

回答by Tomasz Tybulewicz

The easy way

简单的方法

The easiest way is to use the .ajaxStop()event handler:

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

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

The hard way

艰难的道路

You can also manually detect if any ajax call is still active:

您还可以手动检测是否有任何 ajax 调用仍处于活动状态：

Create a variable containing number of active Ajax connections:

创建一个包含活动 Ajax 连接数的变量：

var activeAjaxConnections = 0;

just before opening new Ajax connection increment that variable

就在打开新的 Ajax 连接之前增加该变量

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

in successpart check if that variable equals to zero (if so, the last connection has finished)

在success部分检查，如果该变量等于零（如果是的话，最后的连接已完成）

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
  }
}

As you can see, I've added also checking for return with error

如您所见，我还添加了检查返回错误

回答by Tebo

A neat solution would be to use;

一个巧妙的解决方案是使用；

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

For more information check out the jQuery .ajaxStop function at http://api.jquery.com/ajaxStop/

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

回答by nothing-special-here

Maybe:

也许：

jQuery.active == 0

Stolen from:

窃取自：

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

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

More info on StackOverflow:

有关 StackOverflow 的更多信息：

jQuery.active function

jQuery.active 函数

回答by jarda

How about just simply use if?

简单地使用if怎么样？

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

          }
   }