Question

我在for循环中有一个ajax调用，它在另一个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

在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 2

你应该使用一个闭包

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 3

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

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

另一个ajax调用中的Jquery ajax调用在for循环

3 个答案: