Question

我在这个堆栈中一直在努力解决我的问题但是，我找不到任何可能的答案。这是我的问题和我当前（坏）的解决方案

我有一个名为 URL1 的网址，在通过ajax（名为 ajax1 ）从此网址成功检索数据后，我执行了另一个ajax（名为 ajax2 ） URL2 。如果 ajax2 成功，我需要再次执行 ajax1 ，并在第一次调用时使用相同的数据。以下代码是我当前的实现，假设我第一次成功调用 ajax1 。

...
ajax1: function () {
    var ajaxPost = $.ajax({
        type: "POST",
        url: myUrl,
        contentType: "application/json; charset=utf-8",
        data: myData
    });
    return ajaxPost;
},
ajax2: function (url, data, async) {
        var ajaxPost = $.ajax({
            type: "POST",
            url: url,
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(data),
            dataType: 'json',
            async : async
        });
        return ajaxPost;
    },
...
var ajax2 = ajax2(**URL2**, myDataObject,**false**)
ajax2.done(function(data, textStatus, xhr) {
            ajax1();
            if(data.status === "success") {
                $('#success').html(data.message);
                $('#success').show();
            } else {
                $('#error').html(data.message);
                $('#error').show();
            }
        });

正如我们在上面的代码段中看到的， ajax2 的异步设置为 false 。通过此实现，在成功返回 ajax2 并且程序运行到.done（）回调后， ajax1 也可以成功执行。

我知道这个实现是不好的实践，因为它阻止了UI。我想异步执行此请求但是如果我将ajax2的异步设置为 true ，则在成功返回 ajax2 并且程序运行到.done（）回调后， ajax1 无法将其请求发送到服务器。似乎浏览器会阻止此请求，因为我在服务器端的断点无法捕获任何内容，而 ajax2 的ajaxPost变量是

对象{readyState：0，状态：0，statusText：“已取消”}

我觉得我错过了一些非常重要且非常基本的东西，所以任何帮助都会很有用。

**** UPDATE1 ****更具体一点：我可以使用.then（）和$ .Deferred（）在 ajax1 之后链接 ajax2 。链运行就像我期望的那样，但是 ajax2 的ajax请求仍然被浏览器取消。这是使用.then（）

的代码

var ajax2 = ajax2(**URL2**, myDataObject,**false**)
        ajax2.done(function(data, textStatus, xhr) {
                    if(data.status === "success") {
                        $('#success').html(data.message);
                        $('#success').show();
                    } else {
                        $('#error').html(data.message);
                        $('#error').show();
                    }
                }).then(function(){
                    ajax1();
                });

使用$ .Deferred（）

var ajax2 = ajax2(**URL2**, myDataObject,**false**);
var dfrd = $.Deferred();
        ajax2.done(function(data, textStatus, xhr) {
                    if(data.status === "success") {
                        $('#success').html(data.message);
                        $('#success').show();
                    } else {
                        $('#error').html(data.message);
                        $('#error').show();
                    }
                    dfrd.resolve();
                })

         dfrd.then(function(){
                    ajax1();
                });

Answer 1

为什么不使用上一个ajax的结果来保存ajax2.done（）中的控件。像这样：

var ajax2 = ajax2(**URL2**, myDataObject)
        ajax2.done(function(data, textStatus, xhr) {
               var result = ajax1();
               result.done(function(){
                    if(data.status === "success") {
                        $('#success').html(data.message);
                        $('#success').show();
                    } else {
                        $('#error').html(data.message);
                        $('#error').show();
                    }
               });
           });

我希望它有所帮助

Answer 2

对于任何人来说，我已经解决了这个问题。

...
ajax1: function () {
    var ajaxPost = $.ajax({
        type: "POST",
        url: myUrl,
        contentType: "application/json; charset=utf-8",
        data: myData
    });
    return ajaxPost;
},
ajax2: function (url, data, async) {
        var ajaxPost = $.ajax({
            type: "POST",
            url: url,
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(data),
            dataType: 'json',
            async : async
        });
        return ajaxPost;
    },
...
var ajax2 = ajax2(**URL2**, myDataObject,**false**)
ajax2.done(function(data, textStatus, xhr) {
            setTimeout(function() {
                ajax1();
            }, 0);
            if(data.status === "success") {
                $('#success').html(data.message);
                $('#success').show();
            } else {
                $('#error').html(data.message);
                $('#error').show();
            }
        });

setTimeout魔法来拯救。 我真的不知道为什么这个解决方案有效 。到目前为止，根据我的检查，.done()回调似乎不是 已完成 ，浏览器仍然需要在ajax2()之后处理饰面。在ajax1()回拨中调用.done()时，浏览器会拒绝此请求，因为它尚未与ajax2()进行业务往来。通过使用setTimeout，我将ajax1()放在执行队列的末尾，从而为浏览器提供了在执行ajax1()之前完成所有操作的时间。

链接ajax接连ajax完成

2 个答案: