另一个ajax调用中的Jquery ajax调用在for循环中没有按预期工作

Jquery ajax call inside another ajax call is not working as expected inside a for loop

本文关键字：调用 ajax 工作 for Jquery 另一个 循环      更新时间：2023-09-26

我在另一个ajax调用中的for循环中有一个ajax呼叫。代码如下：

 $.ajax({
        type: "GET",
        url: URI, //URI
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (Json) {
            var tr = '';
            tr = tr + '<tr>';
            for (var i = 0; i < Json.length; i++) {
                debugger;
                tr = tr + '<td>'
                tr = tr + '<table><tr><td>'
                tr = tr + '<div id="theDiv" class="DivClass">';
                tr = tr + '<img  id="btnEdit" onclick="EditLevelZeroValue(' + Json[i].ID + ')" src="../Images/Edit-icon.png" title="Edit" alt="Smiley face" style="padding-left:24px;"><img src="../Images/delete.gif" title="Delete" alt="Smiley face" style="margin-left:-17px;margin-bottom:-70px;">';
                tr = tr + " <label id='LevelLbl' style='position:relative; z-index:2;top: 20px; color:white;'> " + Json[i].Title + " </label>";
                tr = tr + " </div> ";
                tr = tr + " </td> ";
                tr = tr + "</tr> ";
                var URI1 = OMSiteUrl + 'api/Levels/GetLevelOne?subModuleID=' + 1 + '&parentId=' + Json[i].ID;
                debugger;
                $.ajax({
                    type: "GET",
                    url: URI1, //URI
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (Json1) {
                        debugger;
                        for (var j = 0; j < Json1.length; j++) {
                            debugger;
                            if (Json1[j].Publish==true)
                            {
                                tr = tr + "<tr><td>";
                                tr = tr + '<div id="theDiv" Class="DivClass2">';
                                tr = tr + '<img src="../Images/Edit-icon.png" title="Edit" alt="Smiley face" style="padding-left:6px;margin-top:-40px;"><img src="../Images/delete.gif" title="Delete" alt="Smiley face" style="margin-left:-17px;margin-bottom:-35px;">';
                                tr = tr + " <label id='LevelLbl' class='font'style='margin-top:17%;margin-left:26%'> " + Json1[j].Title + "</label>";
                                tr = tr + "</td></tr>"
                            }
                            else 
                            {
                                tr = tr + "<tr><td>";
                                tr = tr + '<div id="theDiv" Class="DivClassChange">';
                                tr = tr + '<img src="../Images/Edit-icon.png" title="Edit" alt="Smiley face" style="padding-left:6px;margin-top:-40px;"><img src="../Images/delete.gif" title="Delete" alt="Smiley face" style="margin-left:-17px;margin-bottom:-35px;">';
                                tr = tr + " <label id='LevelLbl' class='font'style='margin-top:17%;margin-left:26%'> " + Json1[j].Title + "</label>";
                                tr = tr + "</td></tr>"
                            }

                        }

                    },
                    error: function () { alert('error'); }
                });
                tr = tr + "</table>";
                tr = tr + "</td>";

            }
            tr = tr + '</tr>';
            $('#levelBox').html(tr);
            //tr = tr + '</tr>';
            //$('#levelBox').html(tr);

        },
        error: function () { alert('error'); }
    });

我在第一个ajax调用中有一个for循环，在这个for循环中，我对每个迭代都有ajax调用。我希望代码以以下方式执行：

第一个ajax调用返回数据列表，对于每个数据，我需要创建一个表并获取另一个数据列表并绑定到同一个表；对于第二次迭代，我需要新建另一个表，获取另一份数据列表并将其绑定到新创建的表。

预期结果

现在的情况是，第一个ajax调用返回一个数据列表，并为每个数据创建表。稍后，获取另一个数据列表，并将其单独绑定到一个表。

如果我将async设为false，结果如下：异步错误结果

有人能帮我吗？

您应该使用闭包

for (var i = 0; i < arr.length; i++) {
  (function(i) {
    // your stuff
  })(i);
}

或$.each()，它为您的创建一个闭包

所以在你的情况下

for (var i = 0; i < Json.length; i++) {
     (function(i) {
        // your stuff
      })(i);
}

在ajax调用中使用async:false

$.ajax({
   type: "GET",              
   url: URI1, //URI             
   async: false,          
   contentType: "application/json; charset=utf-8",    
   dataType: "json",      
   success: function (Json1) {  
   ... // your code   
   }  
});

AJAX中的"A"代表"异步"，这意味着循环的AJAX调用将按顺序触发。如果在触发下一个请求之前需要等待"success"回调完成，可以将"async"选项设置为false。

$.ajax({
    async: false,
    // ...
});
相关文章：