Question

我正在使用jQuery 1.11，但如果我想在彼此需要等待彼此之后再做几个Ajax请求，那么唯一的解决办法就是将它们嵌套起来：

// Ajax #1 -------------------------------
$.ajax({
  dataType: "json",
  url: "index.json",
  data: { urlVar1:val1,urlVar2:val2},
  success: function(data1) {

    // stuff for Ajax #1 ...

    // Ajax #2 ---------------------------
    $.ajax({
      dataType: "json",
      url: "index.json",
      data: { urlVarA:data1-val1,urlVarB:data1-val2},
      success: function(data2) {

        // stuff for Ajax #2 ...

        // Ajax #3 -----------------------
        $.ajax({
          dataType: "json",
          url: "index.json",
          data: { urlVarX:data2-val1,urlVarY:data2-val2},
          success: function(data3) {

            // stuff for Ajax #3 ...

          } // $.ajax.success #3
        }); // $.ajax #3 -----------------

      } // $.ajax.success #2
    }); // $.ajax #2 ---------------------


  } // $.ajax.success #1
}); // $.ajax #1 -------------------------

在现实生活中，我需要Ajax #1来获取多个组... Ajax #2应该处理这些组并获取子组，Ajax #3应该从这些子组中获取单独的行。

从理论上讲，我可以通过一次调用来完成这3个Ajax调用，但这对于如何理解这一点同样重要，因为我认为嵌套方法在我的代码中很快变得太乱。

Answer 1

。然后会更清洁。

// Ajax #1 -------------------------------
$.ajax({
    dataType: "json",
    url: "index.json",
    data: { urlVar1:val1,urlVar2:val2}
}).then(function(data1){
    // Ajax #2 ---------------------------
    return $.ajax({
        dataType: "json",
        url: "index.json",
        data: { urlVarA:data1-val1,urlVarB:data1-val2}
    });
}).then(function(data2) {

    // stuff for Ajax #2 ...

    // Ajax #3 -----------------------
    return $.ajax({
        dataType: "json",
        url: "index.json",
        data: { urlVarX:data2-val1,urlVarY:data2-val2}
    });
}).then(function(data3) {
    console.log(data3);
}).fail(function(){
    console.log("something happened...",arguments);
    console.log(this.url)
});

Answer 2

也许你可以试试这个：

$.when( $.getJSON('index.json', { urlVar1 : val1, urlVar2 : val2 }), 
        $.getJSON('index.json', { urlVarA : data1-val1, urlVarB : data1-val2 }), 
        $.getJSON('index.json', { urlVarX : data2-val1, urlVarY : data2-val2 }) 
).then(function(data1, data2, data3){
    console.log(data1);
    console.log(data2);
    console.log(data3);
});

如何相互依赖多个jQuery Ajax请求？

2 个答案: