Question

我有一系列的ajax调用，我希望当调用完成后页面重新加载，我这样做

function verifyFrnds() {
    var boxes = $(".matchFrnds:checked").length;
    //alert(boxes);
    var call = 1;
    $(".matchFrnds").each(function (index) {
        if ($(this).is(':checked')) {
            call++;
            var sendData = $(this).val();
            $.post('AJAX PAGE', {
                sendData: sendData
            }, function (data) {
                //window.location.reload();
            });
            //alert(call);
            //alert(call + ' ' + boxes + ' ' + (call >= boxes));
            if (call >= boxes) {
                // window.location.reload();
                alert("I am executed");
            }
        }
    });
}

所以如果我发出警报，那么所有的ajax调用都会被执行，并且我会看到一条警告消息，但是如果我window.localtion.reload()，那么在几次ajax调用之后，页面就会被重新加载，这应该在{{{}后重新加载1}}来电。我的主要目的是在完成所有通话后重新加载页面。不知道我做错了什么。在SO上已经有question但它对我帮助不大。

Answer 1

尝试使用$ .when：

function verifyFrnds() {
    var deferreds = []; //using an array to save promise interfaces
    $(".matchFrnds").each(function (index) {
        if ($(this).is(':checked')) {
            var sendData = this.value;
            //we push each request in array (returned promise interface)
            deferreds.push($.post('AJAX PAGE', {
                sendData: sendData
            }));
        }
    });
    //as $.when only accept deferred(promise) as arguments, we need to apply $.when to each promise of array
    $.when.apply(null, deferreds).done(function () {
        alert("I am executed once all requests done (success)");
        window.location.reload();
    });
}

Answer 2

如果您需要按顺序执行此操作，可以使用$ .then链接您的ajax调用。像这样：

function verifyFrnds() {
    var d = jQuery.Deferred();
    var p=d.promise();

    $(".matchFrnds:checked").each(function (index) {//instead of .matchFrnds
        if ($(this).is(':checked')) {

            var sendData = $(this).val();
            p.then($.post('AJAX PAGE', {
                sendData: sendData
              }, function (data) {
                //window.location.reload();
              })
            );
        }
    });

    p.then(function(){
         alert("I am executed");
    });
    d.resolve();
}

请注意，对于1.8之前的jQuery，您必须使用.pipe而不是.then。还要检查你的代码，我认为有一个错误，它应该是$(".matchFrnds:checked").each(而不是$(".matchFrnds").each(

Answer 3

就像 A一样。 Wolff 说，使用 jQuery.when 和 jQuery.then 。

另一种选择是：在ajax完成时调用方法（jqXHR方法始终）。检查该方法中是否调用＆gt; = box（或您喜欢的任何条件）。对我而言，与其他解决方案相比，这有点容易理解。

function verifyFrnds() {
    var boxes = $(".matchFrnds:checked").length;
    //alert(boxes);
    var call = 1;
    $(".matchFrnds").each(function (index) {
        if ($(this).is(':checked')) {
            //call++; Move it to .always Thanks for pointing out Khanh
            var sendData = $(this).val();
            $.post('AJAX PAGE', {
                sendData: sendData
            }, function (data) {
                //window.location.reload();
            }).always ( function() {  
                // This method will be called on ajax completion. be it a failure or success.
                // see .done ( for success only )  ; .fail ( for failure only )
                call++;
                if (call >= boxes) {
                  // window.location.reload();
                   alert("I am executed");
                }
            }   ;


        }
    });
}

有关jqXHR对象的更多信息。阅读：http://api.jquery.com/jQuery.ajax/#jqXHR

Answer 4

你应该在if之后增加call，但是在你的ajax调用成功之后。

我建议你把reload调用放在用setInterval调用的函数中，而不是成功ajax返回。

系列的Ajax请求不等待完成

4 个答案: