如何知道什么时候所有的Ajax调用完成

问题描述

我有行的表样式页面。每一行都有一个复选框。我可以选择所有/许多复选框，然后点击提交，什么是确实是一个jQuery的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.

基本上我对每一行的一种形式，我遍历所有选中的行并提交形式，请问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.

所以我有一个按钮的作用：

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>

这个表单提交到processRow：

This form submits to 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调用完成。希望启用的原因是/禁用提交按钮，而所有这些要求都在发生。

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.

感谢，并请注意，我不得不裂伤我的变量名，由于应用程序的敏感，所以很多人可以被复制。

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.

推荐答案

最简单的方法是使用 .ajaxStop（）事件处理：

The easy way

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

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

难的方法

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

The hard way

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

创建含有活性阿贾克斯连接数的变量：

Create a variable containing number of active Ajax connections:

var activeAjaxConnections = 0;

就在打开新的Ajax连接增量变

just before opening new Ajax connection increment that variable

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

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

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

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

这篇关于如何知道什么时候所有的Ajax调用完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！