Question

我似乎很难找到如何在我的代码中使用when函数。所有ajax请求完成后，我希望实现window.location.reload。

如果我将window.location.reload放在＆＃34;每个＆＃34;之后循环然后我的所有AJAX请求都被中止。

$('.removeSelected').click(function() {        
    if (confirm('Are you sure you will continue?')) {
        $('.container-fluid :input:checked').each(function () {
            var recordId = $(this).data("id");
            // Jquery remove it         
            $.ajax({
                method: "GET",
                url: "/controllers/lines.asp",
                data: { recordId: recordId  }
            }).done(function() {
                console.log('done');
            });
        });
        // window location reload here
    }       
});

Answer 1

你的逻辑顺序似乎有缺陷。我认为你想要做的是收集你的所有记录，然后发送一个请求。请求完成后，重新加载。

$('.removeSelected').click(function() {        
    if (confirm('Are you sure you will continue?')) {

        //prepare an array for records
        var records = [];

        $('.container-fluid input:checked').each(function () {
           //add the id
           records.push($(this).data("id"));
        });

        //make the request
        $.ajax({
            method: "GET",
            url: "/controllers/lines.asp",
            data: records
            }).done(function() {
               //when successful, reload the page
               window.location.reload();
            });
        });
    };
});

我不确定你是想在成功时还是在完成时重新加载（也会在失败时重新加载）。

Answer 2

使用

获取要删除的元素数量

$('.container-fluid :input:checked').size();

每次调用完成后，增加一个单独的总数。当总数与计数匹配时，重新加载页面。

Answer 3

你需要将所有的承诺传递给＆＃34;当＆＃34;这样它就可以等待所有这些问题得到解决。

为此，您可以将$.ajax返回的所有承诺放入数组中并将其传递给$.when：

 $('.removeSelected').click(function() {        
    if (confirm('Are you sure you will continue?')) {

    var promises = [];

    $('.container-fluid :input:checked').each(function () {

        var recordId = $(this).data("id");
        // Jquery remove it         
          promises.push($.ajax({
                method: "GET",
                url: "/controllers/lines.asp",
                data: { recordId: recordId  }
            })
                .done(function() {
                   console.log('done');

        }));

    });
    // use apply to pass an array instead list of parameters
    $.when.apply($, promises).then(function() {
        // all the promises have been resolved
        window.location.reload();
    }       
});

Answer 4

我同意fauxserious一次发送所有内容而不是按记录提出请求会更有效率。

但是，如果由于任何原因您不想更改服务器端代码，您需要做的是确定所有请求何时完成。你可以使用promises实现这一目标。

如果您对此没有太多经验，下面的代码应该让您了解如何在不使用承诺的情况下实现预期的行为：

$('.removeSelected').click(function() {        
    if (confirm('Are you sure you will continue?')) {

        var $containerFluidElements = $('.container-fluid :input:checked');
        var numberOfRequestsPending = $containerFluidElements.length;

        $containerFluidElements.each(function () {
            var recordId = $(this).data("id");
            $.ajax({
                method: "GET",
                url: "/controllers/lines.asp",
                data: { recordId: recordId  }
            }).done(function() {
                numberOfRequestsPending -= 1;
                if(numberOfRequestsPending == 0) 
                {
                    window.location.reload();
                }
            });
        });
    }       
});

在使用Jquery解决所有promise之后执行代码

4 个答案: