12

一起使用 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. 

       }
     });

});

干杯。

4

5 回答 5

11

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

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

但是，正如文档已经说过的那样，这是非常不鼓励的，因为如果请求挂起或超时，它可能会冻结浏览器。

如果可能的话，最好以可以与经典回调函数一起使用的方式更改代码的体系结构。

于 2010-07-13T13:24:42.790 回答
3

佩卡有正确的答案。您只需要编辑您的脚本，如下所示。

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

       }
     });

});
于 2010-07-13T13:34:47.297 回答
0

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

如果您确定请求必须返回某些内容，那么您可以删除“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);
            }
         });

    });
}
}
于 2011-07-05T11:06:21.440 回答
0

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

于 2012-10-08T13:57:56.867 回答
0

虽然已经很晚了，但我为此使用了一种解决方法，我创建了一个函数来通过传递元素来处理 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>

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

于 2021-03-25T20:12:34.973 回答