如何在使用jQuery Ajax后执行其他jQuery操作

Question

我正在使用PHP。我想完成jQuery AJAX过程（完成过程并将数据返回到主页面后）。

然后进行下一个jQuery操作。您有任何关于如何做到这点的想法吗？

$.ajax({
  url: "page1.php", 
  dataType: "html",
  type: 'POST', 
  data: "value=" + value, 
  success: function(data){
    //some process
  }
});//ajax1
$.ajax({
  url: "page2.php", 
  dataType: "html",
  type: 'POST', 
  data: "value=" + value, 
  success: function(data){
    //some process
  }
});//ajax2
$.ajax({
  url: "page3.php", 
  dataType: "html",
  type: 'POST', 
  data: "value=" + value, 
  success: function(data){
    //some process
  }
});//ajax3

// finish all the 3 ajax process, do the below code
$(".page").css('display','block');

- cj333

Answer 1

如果您使用的是 jQuery 1.5 或更高版本，则可以使用天堂般的 $.when 构造，它使用了在该版本的 jQuery 中首次实现的 $.Deferred 概念。当多个 AJAX 请求全部完成时，您可以运行一个函数（或多个函数）。

因此，您的代码应如下所示：

$.when($.ajax({
    url: "page1.php",
    dataType: "html",
    type: 'POST',
    data: "value=" + value,
    success: function (data) {
        //some process
    }
}), $.ajax({
    url: "page2.php",
    dataType: "html",
    type: 'POST',
    data: "value=" + value,
    success: function (data) {
        //some process
    }
}), $.ajax({
    url: "page3.php",
    dataType: "html",
    type: 'POST',
    data: "value=" + value,
    success: function (data) {
        //some process
    }
})).then(function () {

});

- lonesomeday

---

谢谢你分享这个！$.when()看起来真的很方便！ - Aaron Hathaway

+1 for when! 以前从未听说过，我肯定会用到它 :) - Doug Molineux

请注意，.then()需要两个函数：一个用于在一切正常时运行，另一个用于处理错误情况。这对于调试客户端/服务器问题非常有用。 - Elf Sternberg

哦，非常棒！这让我想要升级 :-) - Luke Maurer

Answer 2

如果您有任意数量的ajax操作，可以像这样做：

var arr = [];
arr.push($.ajax(...));
arr.push($.ajax(...));
/* put as many ajax operations as you want into arr */
$.when.apply(arr).then(function() { /* on success */ },
                       function() { /* on error */ });

这是我最喜欢的同步多个ajax调用的技巧。

- Elf Sternberg

Answer 3

仅供记录，以便包含 jQuery 1.5 之前的答案：

$.ajax({
  url: "page1.php", 
  dataType: "html",
  type: 'POST', 
  data: "value=" + value, 
  success: function(data){
    $.ajax({
      url: "page2.php", 
      dataType: "html",
      type: 'POST', 
      data: "value=" + value, 
      success: function(data){
        $.ajax({
          url: "page3.php", 
          dataType: "html",
          type: 'POST', 
          data: "value=" + value, 
          success: function(data){
            // finish all the 3 ajax process, do the below code
            $(".page").css('display','block');
          }
        });//ajax3
      }
    });//ajax2
  }
});//ajax1

希望这至少说明了新的jQuery 1.5做事方式的价值 :-)

- Luke Maurer