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

Question

我有以下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;
});

但是这个解决方案不起作用。

有什么建议吗？

Answer 1

您的代码似乎应该可以使用，但我建议您通过传递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).')');

Answer 2

可能的解决方案＃1：

async参数可以提供帮助。将其设置为false。

由于您正在使用$ .get（）函数，因此完成了：

$.ajaxSetup({
    async: false
});

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

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

有关此问题的更多信息，请here。

可能的解决方案＃2：

如果要在请求失败时不刷新页面，请使用.success()回调挂钩或 .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用于发布数据，请尝试：

$('#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);

有关json_decode的信息，请参阅PHP Manual。

旧版浏览器不支持JSON.stringify。如果您需要跨浏览器支持，请添加JSON-js。

Answer 3

使用“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();
    }
});
...

Answer 4

我也相信通过收集产品ID然后发送一个Ajax调用来处理所有这些问题，可以最好地实现所需的结果。

但是由于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;
});

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

在原始版本中，$.when没有任何有意义的上下文可供使用，apply()方法确实提供了上下文，但只有 之后才完成其（不成功）的工作已经