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

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.

我有一个带行的表样式页面。每一行都有一个复选框。我可以选择所有/多个复选框并单击“submit”，它的作用是为每一行调用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调用是否都完成了。原因是在所有这些调用发生时，希望启用/禁用submit按钮。

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.

谢谢，请注意，由于应用程序的敏感性，我不得不修改变量名称，所以它们中的许多可能会被复制。

4 个解决方案

#1

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

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

#2

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

#3

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

*更多信息:

jQuery.active function

jQuery。积极的功能

#4

How about just simply use if?

如果只是简单的使用呢?

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

          }
   }