Question

我正在执行多个（3）ajax请求。如何检查是否所有这些都已成功返回，然后才对输出执行某些操作。我想过链接请求，但这样会不会同时执行请求。

最终我正在尝试加载三个表，并在加载后，为其位置设置动画。动画应该仅在加载了所有表之后才会发生。

此外，处理多个ajax调用可能是一个好习惯吗？目前，当语法只是重复前一个时，语法看起来并不那么“漂亮”。

谢谢！

这是我的代码：

// 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);
    });

  }

});

Genesis的回答很明显，但不幸的是它产生了另一个问题。很多时候我在Javascript中传递变量时遇到了麻烦 - 在这种情况下也是如此。每个ajax调用的输出不希望显示在“then”函数内：

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

});

Answer 1

$.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');

});

Answer 2

为了2012年来到这里的人的利益，我发现上述答案的语法已经改为如下所示

$.when(
        $.ajax({
            type: 'GET',
            url: '/api/data/jobtypes',
            dataType: "json",
            success: loadJobTypes
        }),

        $.ajax({
            type: 'GET',
            url: '/api/data/servicetypes',
            dataType: "json",
            success: loadServiceTypes
        }),

        $.ajax({
            type: 'GET',
            url: '/api/data/approvaltypes',
            dataType: "json",
            success: loadApprovalTypes
        }),

        $.ajax({
            type: 'GET',
            url: '/api/data/customertypes',
            dataType: "json",
            success: loadCustomerTypes
        }) 

    ).done(function(){

        alert("all done");
    });

Answer 3

预初始化3元素全局数组，然后将结果存储在数组中。数组完全填充后，更新页面。

如何检查多个ajax请求的完成情况？

3 个答案: