別の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'); } 
    }); 

Iは、ループの最初のAJAX呼び出し内部及びその内部forループiは各反復のために、AJAX呼び出しを持っています。

最初のajax呼び出しは、各データに対して、テーブルを作成し、別のデータリストを取得して同じテーブルにバインドする必要があります。また、2回目の繰り返しが必要です。別のテーブルを作成し、別のデータ・リストをフェッチして新しく作成したテーブルにバインドします。今

EXPECTED RESULT

起こっていただきました！最初のAJAX呼び出しがデータのリストを返し、各データのために、テーブルが作成されている、です。後で他のデータのリストがフェッチされ、それを1つのテーブルだけにバインドします。

私は偽として非同期を行う場合は、次のように、結果は次のとおりです。 Async False results

誰かが私を助けることができますか？

Answer 1

使用非同期：AJAX呼び出しで偽

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

Answer 2

AJAXでの「A」は、あなたのループAJAXを順次発射される呼び出しを意味している「非同期」の略です。次のリクエストをトリガする前に完了するために '成功'コールバックを待つ必要がある場合は、 'async'オプションをfalseに設定できます。

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

Answer 3

あなたが

だからあなたの場合

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