每个循环中的 Jquery ajax 调用

Question

我在同时使用 jquery .each() 和 .ajax() 函数时遇到问题。我使用 .each() 循环 5 个元素，并对每个元素执行 .ajax() 调用。我的问题是我只希望循环在收到每个 ajax 请求的响应时继续。目前，所有 5 个元素都在循环，发出 5 个 ajax 请求，然后返回 5 个响应。

她举了一个简单的例子：

$(".element").each(function() {
    var id= $(this).find(('txtId').val();
    $.ajax({
       type: "POST",
       url: "/Handlers/Handler.ashx",
       data: "ID=" + id,
       success: function(xml){

         // I would like the each() loop to pause until this is hit, 
         // and some additional logic can be performed. 

       }
     });

});

干杯。

Answer 1

您可以使用 async 选项来使每个请求同步（= 暂停脚本执行，直到每个请求完成）：

异步
默认情况下，所有请求都是异步发送的（即默认设置为 true）。如果需要同步请求，请将此选项设置为 false。跨域请求和dataType:“jsonp”请求不支持同步操作。请注意，同步请求可能会暂时锁定浏览器，从而在请求处于活动状态时禁用任何操作。

但是，正如文档已经说过的那样，强烈建议不要这样做，因为如果请求挂起或超时，它可能会冻结浏览器。

如果可能的话，最好以可以使用经典回调函数的方式更改代码的架构。

Answer 2

佩卡有正确答案。您只需如下编辑脚本即可。

$(".element").each(function() {
    var id= $(this).find(('txtId').val();
    $.ajax({
       type: "POST",
       async: false,
       url: "/Handlers/Handler.ashx",
       data: "ID=" + id,
       success: function(xml){

       }
     });

});

Answer 3

我很高兴地说有一种方法...但这有点令人讨厌。

如果您确定请求必须返回一些内容，那么您可以删除“tryIteration”部分。

$(document).ready(function() {

        loop(".buttonsPromotion", 0);

});

function loop(elements, tryIteration) {
//HOW MANY TRIES UNTIL WE STOP CHECKING
if(tryIteration<7){

    $(elements).each(function() {            
        var actuel = $(this);
        $.ajax({
           url: "write your link here",
           data: {},
           dataType: 'json',
           async: true,
           success: function(data){
               //HERE WE KNOW THE AJAX REQUEST WENT OK
               actuel.addClass('AjaxOK');    
           },
           error:function(thrownError){
                console.log(thrownError);
                //WE MAKE ANOTHER EACH ON ALL ELEMENT THAT WENT BAD
                var elemToRetry = actuel.not('AjaxOK');
                loop(elemToRetry, ++tryIteration);
            }
         });

    });
}
}

Answer 4

您可以使用jquery deferred 和promise 函数来检查异步调用是否成功。 http://joseoncode.com/2011/09/ 26/a-walkthrough-jquery-deferred-and-promise/

Answer 5

虽然已经很晚了，但我为此使用了解决方法
我创建了一个函数来通过传递元素来处理ajax请求

function ajax_request(element){
    var id = element.find('.txtId').val();
    console.log(id);
    $.ajax({
        type: "POST",
        url: "/Handlers/Handler.ashx",
        data: "ID=" + id,
        success: function(xml){
            console.log(xml);
        }
     });
}

$(".element").each(function() {
    // run the ajax function for current element
    ajax_request($(this));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="element">
    <input class="txtId" value="textid1"/>
</div>
<div class="element">
    <input class="txtId" value="textid2"/>
</div>
<div class="element">
    <input class="txtId" value="textid3"/>
</div>

希望它可以帮助任何做类似事情的人