如何检查多个ajax请求的完成? [英] How to check completion of multiple ajax requests?

问题描述

我正在执行多个(3)ajax请求.我如何检查它们是否都已成功返回，并且仅在此之后才对输出执行某些操作.我曾考虑过链接请求，但是那样就不会同时执行请求.

I'm executing multiple(3) ajax requests. How can I check whether all of them have returned successfully, and only after then do something with the output. I thought about chaining the requests, but that way the requests wouldn't be executed simultaneously.

最终，我尝试加载三个表，并在加载后为它们的位置设置动画.动画应仅在所有表都加载后才发生.

Ultimately I'm trying to load three tables, and after the loading, animate their position. The animation should happen only after all of the tables have been loaded.

此外，处理多个ajax调用的最佳实践是什么?目前，语法只是前一个语法的重复而已，看上去还不是那么漂亮".

Additionally, what could be a good practice to handle multiple ajax calls? At the moment the syntax doesn't look all that "pretty" when it's simply a repetition of the previous.

谢谢！

这是我的代码:

// THIS TABLE
$.ajax({
  type: 'POST',
  url:  'includes/content/bookingsystem/b_dayview.php',
  data: $(this).attr('name') + '=true',
  success: function(output) {

    $('#bookingTableThis').animate({  
      left: direction + '=820'
    }, 500, function() {
      $('#bookingTableThis').html(output);
    });

  }

});


// PREV TABLE
$.ajax({
  type: 'POST',
  url:  'includes/content/bookingsystem/b_dayview.php',
  data: $(this).attr('name') + '=true&dateShift=prev',
  success: function(output) {

    $('#bookingTablePrev').animate({
      left: direction + '=820'
    }, 500, function() {
      $('#bookingTablePrev').html(output);  
    });

  }
});


// NEXT TABLE
$.ajax({
  type: 'POST',
  url:  'includes/content/bookingsystem/b_dayview.php',
  data: $(this).attr('name') + '=true&dateShift=next',
  success: function(output) {

    $('#bookingTableNext').animate({  
      left: direction + '=820'
    }, 500, function() {
      $('#bookingTableNext').html(output);
    });

  }

});

创世纪的答案很明显，但不幸的是，这引起了另一个问题.很多时候，我在用JavaScript传递变量时遇到了麻烦-在这种情况下也是如此.每个ajax调用的输出都不希望显示在"then"函数内:

Genesis' answer was spot on but unfortunately it generated another problem. Many times I have had trouble passing variables around in Javascript - just as well in this case. The output of each ajax call doesn't like to show up inside the "then" function:

var outputThis;
var outputPrev;
var outputNext;

$.when(function(){

  // THIS TABLE
  $.ajax({
    type: 'POST',
    url:  'includes/content/bookingsystem/b_dayview.php',
    data: $(this).attr('name') + '=true',
    success: function(output) { outputThis = output; }
  });

  // PREV TABLE
  $.ajax({
    type: 'POST',
    url:  'includes/content/bookingsystem/b_dayview.php',
    data: $(this).attr('name') + '=true&dateShift=prev',
    success: function(output) { outputPrev = output; }
  });

  // NEXT TABLE
  $.ajax({
    type: 'POST',
    url:  'includes/content/bookingsystem/b_dayview.php',
    data: $(this).attr('name') + '=true&dateShift=next',
    success: function(output) { outputNext = output; }
  });

}).then(function(){

  // THIS
  $('#bookingTableThis').animate({  
      left: direction + '=820'
  }, 500, function() {
      $('#bookingTableThis').html(outputThis);
  });

  // PREV
  $('#bookingTablePrev').animate({
    left: direction + '=820'
  }, 500, function() {
    $('#bookingTablePrev').html(outputPrev);  
  });

  // NEXT
  $('#bookingTableNext').animate({  
    left: direction + '=820'
  }, 500, function() {
    $('#bookingTableNext').html(outputNext);
  });

}); 

推荐答案

$.when(function(){// THIS TABLE
$.ajax({
  type: 'POST',
  url:  'includes/content/bookingsystem/b_dayview.php',
  data: $(this).attr('name') + '=true',
  success: function(output) {

    $('#bookingTableThis').animate({  
      left: direction + '=820'
    }, 500, function() {
      $('#bookingTableThis').html(output);
    });

  }

});


// PREV TABLE
$.ajax({
  type: 'POST',
  url:  'includes/content/bookingsystem/b_dayview.php',
  data: $(this).attr('name') + '=true&dateShift=prev',
  success: function(output) {

    $('#bookingTablePrev').animate({
      left: direction + '=820'
    }, 500, function() {
      $('#bookingTablePrev').html(output);  
    });

  }
});


// NEXT TABLE
$.ajax({
  type: 'POST',
  url:  'includes/content/bookingsystem/b_dayview.php',
  data: $(this).attr('name') + '=true&dateShift=next',
  success: function(output) {

    $('#bookingTableNext').animate({  
      left: direction + '=820'
    }, 500, function() {
      $('#bookingTableNext').html(output);
    });

  }

});
}).then(function(){
    alert('all of them were done');

});

这篇关于如何检查多个ajax请求的完成?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！