jQuery在刷新页面之前等待AJAX请求完成

我有以下jQuery：

$("#delete_products").click(function() {
    $(":checkbox:checked").each(function() {
        var pid = $(this).val();
        $.get('delete_product.php',{pid: pid});
    });
    location.reload();
});

这有一个问题，因为页面不等待AJAX请求完成（多个AJAX请求），并立即刷新页面，使AJAX请求不运行并失败

如何才能使页面仅在加载完成后刷新

我收到了以下代码：

$("#delete_products").click(function () {
    var promises = [];
    $(":checkbox:checked").each(function () {
        var pid = $(this).val();
        promises.push($.get('delete_product.php', {
            pid: pid
        }));
    });
    $.when.apply($, promises).done(function () {
        location.reload();
    });
    return false;
});

但这个解决方案根本不起作用

有什么建议吗？

可能的解决方案#1：

async

参数可能会有所帮助。将其设置为false

由于您使用的是$.get（）函数，因此这是通过以下方法完成的：

$.ajaxSetup({
    async: false
});

使用$.ajax（）函数，只需将其设置为：

$.ajax({
    url: ...,
    async: false,
    success: function(data) {}
});

更多关于这方面的信息可以找到

可能的解决方案#2： 如果要刷新页面，请使用回调挂钩或

.complete（）

，如果请求失败或未成功，则不进行任何更新

$.get('delete_product.php',{pid: pid}).success(function(response)
{
    location.reload();
});

快乐编码

编辑： 发问者似乎比sUP的答案更容易回答。我想提供一个如何使用jQuery实现所需功能的示例：

$("#delete_products").click(function()
{
    var products = [];

    $(":checkbox:checked").each(function()
    {
        var pid = $(this).val();
        products.push(pid);
    });

    $.post('delete_products.php', {'products': products}).done(function()
    {
        location.reload();
    });
});

如果您喜欢将JSON用于post数据，请尝试：

$('#delete_products').click(function()
{
    var products = [];
    
    $(':checkbox:checked').each(function()
    {
        products.push($(this).val());
    });

    // Convert the products array into JSON
    products = JSON.stringify(products);

    $.post('delete_products.php', {'products': products}).done(function()
    {
        location.reload();
    });
});

在PHP中，您需要按如下方式解析json字符串：

<?php
// This creates an associative array from the JSON string
$delete_products = json_decode($_POST['products'], true);

// Use explode to make a comma separated string from the array
// for use in a SQL SELECT query:
$delete_products = explode(',', $delete_products);

使用“get”的“success”参数

编辑：添加请求的计数器

total_requests = $(":checkbox:checked").length;
total_success = 0;

...
$.get('delete_product.php',{pid: pid}, function (data, status, xx) {
    ...
    total_success++;
    if (total_success >= total_requests) {
        location.reload();
    }
});
...

您的代码似乎应该可以工作，但我建议通过传递ID数组，通过一次调用删除所有产品

浏览器的工作量越少，服务器的工作量越少，结果越快


更新的答案

$("#delete_products").click(function () {
    var ids = [];

    $(":checkbox:checked").each(function () {
        ids.push($(this).val());
    });

    $.post('delete.php', { 'ids': ids } }).done(function() {
        alert('hells yeah!');
    });

    return false;
});

至于服务器端：

$commaSeperatedIds = explode(',', $_POST['ids']);

mysql_query('DELETE FROM products WHERE id IN('.mysql_real_escape_string($commaSeperatedIds).')');

我也相信，通过收集产品ID，然后发送一个Ajax调用来处理所有这些ID，可能可以获得最好的结果

但是自从OP提出了一个有趣的问题，即如何处理多个Ajax请求并等待它们全部完成之后，我再次研究了
when（）
方法，在我看来，原始语法仍然有缺陷

根据jQuery手册
when（）
是一个方法，因此需要使用括号中的一个或多个参数调用。我还没有与承诺一起工作，也没有测试过任何东西，但我认为以下内容可能至少会带来不同的结果：

$("#delete_products").click(function () {
    var promises = [];
    $(":checkbox:checked").each(function () {
        var pid = $(this).val();
        promises.push($.get('delete_product.php', {
            pid: pid
        }));
    });
    $.when(promises).done(function () {
        location.reload();
    });
    return false;
});

正如我之前所说，我还没有完全掌握
承诺
机制/语法

在原始版本中，
$。当
没有任何有意义的上下文可供处理时，
apply（）
方法会提供上下文，但只有在它已经完成了（未成功的）工作之后。
第二个代码乍一看是正确的-它以什么方式“不工作”？建议使用get（）的success函数的答案被否决。为什么这不是一个选项？@cars10因为OP显然想要等待多个AJAX请求（尽管问题写得很糟糕，只在代码中暗示了这一点，而不是在文本中）。“success”的回答给出了完全不正确的语法，即使是处理一个请求。@Alnitak也会重新加载页面，而不会删除项目。糟糕的描述？你需要什么信息？@kfirba检查你的控制台是否有错误，我看不出
有什么问题。当基于
的代码-这正是应该如何编写的。这不可能是asnwer。我想发送多个AJAX请求，而不是只发送一个。因此，这段代码根本帮不了我all@kfirba为什么它帮不上忙？只需在您使用的ajax函数中使用
success（）
回调@他希望等待多个AJAX查询完成。使用
.when
是正确的方法。@不幸的是，Markushofman，您的示例说明了如何使用
$。when
是不正确的，因为您事先不知道将有多少
。
。这就是OP（显然正确）代码使用
$.when.apply（$，数组）
的原因。另外，更常用的方法是使用
.done
而不是
。然后
-当您希望返回替代承诺而不是只注册回调时，使用后者。@Alnitak我将改进示例。这不是asnwer。我想发送多个AJAX请求，而不是只发送一个。因此，这段代码根本帮不上我的忙，“…”一行意味着你必须检查你的所有请求是否都成功了。。。留个柜台什么的。听起来不错，有什么建议吗？我不知道如何使用$.get（）传递数组，或者在php文件中传递数组后如何使用数组。@kfirba示例：传递
myparam=JSON.stringify（['array']）
作为参数，然后在php中使用
JSON\u decode（$\u get['myparam']）
来获取数组。@sUp我从未使用过JSON。我真的不知道结果会是什么。假设我得到了一个名为“ids”的数组，其中包含我要删除的所有id。如何使用
$.post（）
方法传递它？在文件
delete_product.php
中，如何获取此$\u POST变量并运行循环来扫描数组元素？注意：允许发送数组参数的php hack不是CGI标准功能。服务器端语言不支持它。@Alnitak不知道，谢谢。我想从现在起我将使用json
$。when.apply（$，array）
是调用
$的正确方法。when
使用长度未知的承诺数组。严格地说，第一个参数（
$
）将被忽略，因为
$。当
不关心这个
是什么时。@Alnitak感谢您回答我的问题并向我澄清这一点！我想我现在明白了：
when
实际上并没有调用它自己，而是
apply（）
调用“when”（在apply（）中，它将显示为
this
）及其给定参数。。。