Question

我的网络应用程序在ajax请求中作为以下结构：

 $.ajax({
    type : "GET",
    url: '...',
    dataType: "xml",
    success: function(xml) {

                $.ajax({
                    type : "GET",
                    url : "....",
                    dataType : "xml",

                    success : function(xml) {

                    },
                    error : function(xhr) {
                        alert(xhr.responseText);
                    }
                });
                $.ajax({
                    type : "GET",
                    url : "....",
                    dataType : "xml",

                    success : function(xml) {
                    },
                    error : function(xhr) {
                        alert(xhr.responseText);
                    }
                });

                $.ajax({
                    type : "GET",
                    url : "...",
                    dataType : "xml",

                    success : function(xml) {
                    },
                    error : function(xhr) {
                        alert(xhr.responseText);
                    }
                });


        }
 });

在我做其他事情之前，我需要在这里完成的所有请求才能完成。因为我需要他们将内容加载到div中。然后将其附加到我的代码中的html元素。而且我不想使用（文档）.ajaxStop，因为这会在以后破坏我的代码。

我怎样才能实现这个目标？

Answer 1

jQuery的$.ajax默认返回一个promise（$.Deferred）。因此，您不必使用回调，而是可以使用这些承诺。然后使用$.when函数，您可以创建一个新的承诺，等待这3个承诺完成并执行您需要的所有操作。

查看链接页面底部的示例，了解它的工作原理。

编辑：如果文档是正确的，那么它应该如下所示：

$.ajax({
  type : "GET",
  url: '...',
  dataType: "xml"
})
  .then(function (xml) {
    return $.when(
      $.ajax({
        type : "GET",
        url : "....",
        dataType : "xml"
      }),
      $.ajax({
        type : "GET",
        url : "....",
        dataType : "xml"
      }),
      $.ajax({
        type : "GET",
        url : "...",
        dataType : "xml"
      })
    );
  })
  .then(function (res1, res2, res3) {
    var xml1 = res1[0], xml2 = res2[0], xml3 = res3[0];


  });

但我没有测试它，所以我不知道它是否真的是对的。

Answer 2

您可以使用不同的（$.Deferred）对象来使代码看起来更干净，

每个$.ajax请求都会返回一个不同的对象，并将其与$.when和.done()组合一起使用，如下所示

$.when(req1, req2, req3).done(function (resp1, resp2, resp3) {

    //This will be executed on the success of all three requests
})

在您的情况下，您可以执行以下操作

var req1 = $.ajax({type:"GET", url: "..."});

req1.done(function (resp1) {

    // This will execute after the first request is done
    var req2 = $.ajax({type:"GET", url: "..."}),
        req3 = $.ajax({type:"GET", url: "..."}),
        req4 = $.ajax({type:"GET", url: "..."});

    $.when(req2, req3, req4).done(function (resp2, resp3, resp4) {

        // when other three request are done
    });

    // If there are arbitrary number of requests, please consider the following
    var requestsArray = [],
        numberOfRequests = 10;

    for (var i=0; i<numberOfRequests; i++) {

        var request = $.ajax({type:"GET", url: "..."});
        requestsArray.push(request);
    };

    $.when.apply(null, requestsArray).done(function () {

        // You can collect the responses in the same order from `arguments`
        var responses = arguments;
    });
});

延迟对象提供了一种处理回调的非常好的方法，要了解有关延迟对象的更多信息，请查看http://api.jquery.com/category/deferred-object/

Answer 3

我认为你可以像这样使用Jquery Defer。串口呼叫

  $.ajax('http://echo.jsontest.com/id/1')
  .then(function(result){
      console.log(JSON.stringify(result));
      return $.ajax('http://echo.jsontest.com/id/2')
  }).then(function(result){
      console.log(JSON.stringify(result));
      return $.ajax('http://echo.jsontest.com/id/3')
  }).then(function(result){
      console.log(JSON.stringify(result));
  });

并行呼叫

$.when(
     $.ajax('http://echo.jsontest.com/id/1'),
     $.ajax('http://echo.jsontest.com/id/2'),
     $.ajax('http://echo.jsontest.com/id/3')
 ).then(function(result1, result2, result3){
     console.log(JSON.stringify(result1[0]));
     console.log(JSON.stringify(result2[0]));
     console.log(JSON.stringify(result3[0]));
 })

ajax封装的请求需要等待累积的结果

3 个答案: