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

Question

我在另一个 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 调用返回数据列表，对于每个数据我需要创建一个表并获取另一个数据列表并绑定到同一个表，对于第二次迭代我需要创建另一个表并获取另一个数据列表并绑定它到新创建的表。

EXPECTED RESULT

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

如果我将 async 设为 false，结果如下： Async False results

有人可以帮我吗？

Answer 1

你应该使用闭包

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);
}

Answer 2

在 ajax 调用中使用 async: false

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

Answer 3

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

$.ajax({
    async: false,
    // ...
});