Question

如何在下面的函数中发出第二个AJAX请求而不是同步？ result是一个字符串，应以'start of string'开头，以'end of string'结尾，但在字符串的中间将是正在迭代的初始AJAX请求的结果。

Foo = {
    foo: function() {
        $(document).on("change", '.foo', function(e) {
            e.preventDefault();
            $.ajax({
                url: "foo.php",
                success: function(rows) {
                    $.each(rows, function() {
                        var result = 'start of string'; // START
                        $.ajax({
                            url: "bar",
                            async: false, // I DON'T want this
                            success: function(data) {
                                result += data; // MIDDLE
                            }
                        });
                        result += 'end of string'; // END
                    });
                }
            });
        });
    }
}

谢谢。

Answer 1

您可以利用jquery延迟对象。您可以在不同的函数中使用两个不同的ajax调用，然后可以使用.done（）方法确保在完成两个ajax调用后获得最终字符串。

在这里阅读更多内容：

Answer 2

最简单的方法是使用延迟对象，即使用jQuery when和done延迟语句的JavaScript示例;

$.when(ajaxCallOne()).done(ajaxCallTwo(rows));

function ajaxCallOne() {
    return $.ajax({
                url : "foo.php",
                async: true
            });
}

function ajaxCallTwo(rows) {
    var result = 'start of string';
    $.each(rows, function() {
        $.ajax({
            url : "bar",
            async : true,
            success : function(data) {
                result += data; // MIDDLE
            }
        });
        result += 'end of string'; // END
    });

    return result;
}

我不是JavaScript也不是jQuery专家，但我认为你应该看看那些延迟的对象。

Answer 3

我认为你应该看一下javascript promise design pattern

让我向你解释一下：

这个承诺是一种代理，代表着未来的结果操作。然后，您将在promise上注册回调一旦操作完成，将由承诺执行结果可用。

使用jQuery，您可以定义这样的承诺：

var promise = $.getJSON('url');

然后使用您的promise变量，您可以定义在请求完成或失败时要执行的操作，或者甚至在失败或成功时执行某些功能。

promise.done(function(s) {alert('done successfully'); });
promise.fail(function(){ alert('get failed!'); });
promise.always(function(){ alert('this 'll executed anyway!'); });

有很多关于它的教程

Promises and Deferred objects in jQuery

jQuery: Deferred Object

javascript promises

What is the benefit of a 'promise' abstraction in CommonJS?

Answer 4

在jquery中，链接异步调用的方法是一个接一个地执行，使用promise.then()，在以前的jquery版本中也称为promise.pipe()。

Foo = {
    foo: function() {
        $(document).on("change", '.foo', function(e) {
            e.preventDefault();

            var param1 = {url: "foo.php"};
            var param1 = {url: "bar"};

            $.ajax(param1)
               .then(function(rows) {
                    var result = 'start of string'; //START
                    var fn = function(data) {
                       result += data;
                    }
                    var last, first;
                    $.each(rows, function() { // rows should be iterable
                        if (!last) { 
                           first = last = $.ajax(param2).done(fn)
                        } else {
                           last = last.then(function(res) {
                              return $.ajax(param2).done(fn);
                           });
                        }
                    });
                    last.done(fn).done(function() {
                       result += 'end of string'; // END
                    });
                    return first;
               });
        });
    }
}

将一系列同步AJAX请求转换为异步请求

4 个答案: