-1

我有以下 jQuery：

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

这是一个问题，因为页面不等待 AJAX 请求完成（MULTIPLE AJAX REQUESTS），而是立即刷新页面并使 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;
});

但是这个解决方案是行不通的。

有什么建议么？

4

4 回答 4

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).')');
于 2013-08-10T20:53:38.503 回答
0

Use "success" parameter of "get"

EDIT: add counter of requests.

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();
    }
});
...
于 2013-08-10T20:51:24.230 回答
0

可能的解决方案#1：

该async参数可能会有所帮助。将其设置为假。

由于您使用的是 $.get() 函数，因此可以通过以下方式完成：

$.ajaxSetup({
    async: false
});

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

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

更多信息可以在这里找到。

 

可能的解决方案#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 手册中找到。

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

于 2013-08-10T20:40:24.690 回答
-1

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

但是由于 OP 提出了如何处理多个 Ajax 请求并等待它们全部完成的有趣问题，所以我when()再次查看了该方法，在我看来，原始语法仍然有问题。

根据 jQuery 手册when()，是一种方法，因此需要在括号中使用一个或多个参数调用。我还没有使用 Promise，也没有测试过任何东西，但我认为类似以下的内容可能至少会带来不同的结果：

$("#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()方法确实提供了上下文，但只有在已经完成其（不安全的）工作之后。

于 2013-08-11T08:07:40.630 回答