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


75

我有一个带有行的表格样式页面。每行都有一个复选框。我可以选中所有/很多复选框,然后单击“提交”,这是对每一行的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调用是否均已完成。原因是要在所有这些调用发生时启用/禁用提交按钮。

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


1
在检测所有ajax调用何时完成对任何设计都有价值时,我认为更好的整体解决方案是一次提交多行。在某些方面,将每一行作为单独的ajax帖子发送给系统确实很困难,而且(在我看来)也不是最佳设计。我什至会说,我保证有一天,如果您坚持使用这种单行一次调用的设计,您会后悔的。
ErikE 2015年

除了@ErikE指出的设计问题外,我很惊讶没有人提到使用Promises来回答最初的问题。
Delphi.Boy 2016年

Answers:


139

简单的方法

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

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

艰难的道路

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

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

var activeAjaxConnections = 0;

在打开新的Ajax连接之前,递增该变量

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

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

如您所见,我还添加了检查返回错误的信息


4
触发后,如何再次删除ajaxStop处理程序?


3
关于“艰难的方式”:不需要保留变量,Jquery已经做到了:$ .active保留当前活动的ajax调用的数量
Sebastianb

1
请注意,事前提醒应该是事前发送
Dean

如果同时存在多个Ajax,有什么方法可以弄清楚它是哪个?
8



-4

仅使用if怎么样?

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

          }
   }
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.