Question

我有一个购物车，用户可以在其中添加更多商品，更改现有商品的数量，删除商品等。对于每个操作，我都会对服务器执行异步AJAX调用，以便更新订单总数。

如果用户添加了一个项目（操作1），我会执行异步调用，然后用户更改另一个项目的数量（操作2），我希望操作2的响应显示出来。由于这些调用是异步的，因此我得到的最新响应是来自操作1的响应，因此订单总数不正确。

在上一个AJAX调用完成之前，我应该遵循什么模式才能触发相同的AJAX调用？

澄清：

正在发生的AJAX请求是相同的。说我这样做$ .get（＆＃39; destination_url＆＃39;）。我只需要确保在上一个请求完成/失败之前我不会做同样的请求。

Answer 1

我建议您在调用当前ajax请求done()后触发连续的ajax请求：

$.ajax(options).done(function (data) {
    // your logic
    $.ajax(newOptions);
});

Answer 2

<强>更新

function AjaxCall1()
{
    return $.ajax({
        type: "POST",
        url: webMethod,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        data: parameters,
        success: function (data, st) {
        }   
}

$(document).ready(function () {
    $.when(AjaxCall1()).done(function(){
        AjaxCall1(); //call same ajax call again once the first one is called 
    })
});

Answer 3

na.rm = TRUE返回一个整数，它是当前打开的活动ajax请求数。

所以你可以在进行ajax调用之前进行检查，

jQuery.active

然后添加和function checkAndCallAjax() { if(jQuery.active == 0) { doAjax() } }处理程序来调用ajaxStop您可以确保没有并行订单请求。 AjaxStop会在ajax调用结束时通知您。

Answer 4

正如我在评论中所说，其中一个选项是在任何操作处于活动状态时以编程方式激活/停用控件。当所选操作完成时（完成ajax，使用ajax数据执行等操作）激活控件，以便用户执行下一个操作等。下面是演示我的意思的代码。

$(function() {

    $("#actions").on("click", ".update", function() {
        var $this = $(this);
        var label = $this.text();
        $this.siblings().prop("disabled", true);
        $this.text("Please wait...");
        //Ajax call
        $.ajax({
            method: "POST", // or whatever fits
            url: "/echo/html/", // your url
            data: { method: "methodName" } // whatever data
        }).done(function( data ) {
            //do stuff with returned data
            //Enable the controls
            $this.siblings().prop("disabled", false);
            $this.text(label);
        }).fail(function() {
            //Handler error related stuff
            alert( "There was an error!" );
            //Enable the controls
            $this.siblings().prop("disabled", false);
        });
    });
});

示例HTML：

<div id="actions">
    <button class="update add">+1</button>
    <button class="update subtract">-1</button>
    <button class="update delete">Delete</button>
</div>

<强> =Working Demo=

希望有所帮助。

在上一个请求完成之前不要触发AJAX请求

4 个答案: