在.each循环中一个接一个地运行Ajax请求

I'm trying to find a way to run each Ajax post request one after another but waiting for the one beforehand to complete before running the next. I've tried a couple of methods to no avail so I've stripped it back down to the basics and am wondering that the best way (and a way that works) to go about this is.

我试图找到一种方法来运行一个又一个Ajax post请求，但是在运行下一个请求之前先等待一个请求完成。我尝试了一些没用的方法，所以我把它简化到最基本的，我想知道最好的方法(和一种有效的方法)是什么。

When they are run as they do now, some of the requests never make it through because it seems to be interrupted by the next request.

当它们像现在这样运行时，有些请求不会通过，因为它似乎会被下一个请求中断。

$('.element').each(function() {
        e_id = $(this).attr('data-id');
        $.ajax({
            url: '/?cart-add=' + e_id +'&quantity=1',
            type: 'POST'
        });
    });
)};

Then once that is completed in full I was redirecting to another page which was working correctly but the above requests were an issue as not all items were showing up yet as it went through each iteration it was logging the id to console which were as expected.

一旦全部完成，我就会重定向到另一个正在正常工作的页面，但是上面的请求是一个问题，因为并不是所有的项目都显示出来，在每次迭代过程中，它都会像预期的那样将id记录到控制台。

window.location.href = "http://*.com";

2 个解决方案

#1

These Ajax Requests run asynchronously so as to improve the user experience.

这些Ajax请求异步运行,以提高用户体验。

So perhaps what you will want to do is only call the next Ajax Request once the previous one has completed.

因此，您可能只想在前一个Ajax请求完成之后调用下一个Ajax请求。

You can specify the function within the "success" option of the ajax call. And with a different way of iterating:

您可以在ajax调用的“success”选项中指定函数。用另一种迭代的方式

var elementArray;
function callingFunction()
{
    elementArray = new Array();
    $(".element").each(function () {
        elementArray.push($(this));
    });
    doAjax(0);

}


function doAjax(arrCount) 
{
    //USE arrCount to access your data
    var e_id = elementArray[arrCount].attr("data-id");
    $.ajax({
        url: "...",
        type:"POST",
        success: function () {
            arrCount++;
            if (arrCount < elementArray.length)
            {
                doAjax(arrCount);
            }
            else
            {
                window.location.href = "......";
            }              
        }
    });
}

Explanation

You place all of your elements within an array (Global Array) start the doAjax function with a zero value. (You should build logic to check whether there are array elements)

将所有元素放在数组(全局数组)中，以0值启动doAjax函数。(您应该构建逻辑来检查是否有数组元素)

When the ajax function completes it checks if there are more items to be sent and calls the doAjax again with the incremented counter.

当ajax函数完成时，它检查是否有更多的项要发送，并使用递增计数器再次调用doAjax。

If there are no more elments, a redirect is done.

如果没有其他的喜悦，就进行重定向。

NOTE

It is worth noting that you would rather do one bulk Post with JSON or something rather than doing many little posts.

值得注意的是，您宁愿使用JSON做一个批量发布，也不愿做许多小发布。

Hope it helps. Happy Coding.

希望它可以帮助。快乐的编码。

#2

You can also use async: falsein your ajax options object.

还可以使用async: falsein ajax options对象。

Fiddle: jsfiddle.net/pleinx/nhspycf0/

小提琴:jsfiddle.net/pleinx/nhspycf0/

If something failed in (no data-id or request) will stop the loop.

如果出现故障(没有数据id或请求)将停止循环。

The other way has already good explain the user Terrance00

另一种方法已经很好的解释了用户Terrance00