jQuery的嵌套的AJAX調用不工作

Question

我試圖讓嵌套ajax調用，但迭代不起作用：比方說，我有2家企業具有2個觸點公司號碼1和具有3個聯繫人公司2號。我想不通爲什麼，但下面給出的代碼顯示兩個公司名稱後面的五個聯繫人姓名：它不是嵌套....

<script type="text/javascript"> 
    $(function() { 
     $('#searchbutton').bind('click', function (event) { 
      $("#result > h4, #result > p").remove(); 
      $("<p>Loading...</p>").appendTo($("#result")); 
      $.ajax({ 
       type: "GET", 
       dataType: "jsonp", 
       cache: true, 
       url: "http://localhost/archilab/archilabdirectory.svc/", 
       data: ("tag=" + $("#searchstring").val()), 
       success: function (companies) { 
        $("#result > p").remove(); 
        $.each(companies, function() { 
         var outer = this; 
         $("<h4>", { text: outer.Name + " (" + outer.Perimeter + ")" }).hide().appendTo($("#result")).show(4000, function() { 
          $.ajax({ 
           type: "GET", 
           dataType: "jsonp", 
           cache: true, 
           url: "http://localhost/archilab/archilabdirectory.svc/" + outer.Name + "/contacts/", 
           success: function (contacts) { 
            $(contacts).each(function() { 
             $("<p>", { text: this.FirstName + " " + this.LastName }).hide().appendTo($("#result")).show(); 
            }); 
           } 
          }) 
         }); 
        }); 
       } 
      }); 
     }) 
    }); 
</script> 

Answer 1

你一定要明白，你的$.ajax調用是異步的，正確的？這each：

​​

將增加一個<h4>，啓動異步調用$.ajax，然後重複在companies下一個條目。 Ajax調用幾乎肯定會需要更長的時間來完成比$.each所以它會產生公司名稱<h4>秒，然後Ajax調用將完成並添加<p>秒。無法保證<p>甚至會以正確的順序添加。

如果您需要以特定順序發生的事情，那麼您將不得不將async: false添加到$.ajax調用中。

更新：我需要比評論提供了更多的空間。不，這不是我最後的定理。

您可以將<h4>的東西下推到內部成功處理程序中，但這仍然會導致您對訂購問題持開放態度（即第二次AJAX調用可能會在第一次之前完成）。我認爲，最容易做的事情是添加包裝<div> s的ID在你<h4>和<p>元素屬性，這將給你一個.append調用一個容易的目標;東西有點像這樣：

$.each(companies, function() { 
    var $wrapper_hack = $('<div/>'); 
    $('#result').append($wrapper_hack); 
    add_content($wrapper_hack, outer); 
}); 

// And elsewhere... 
function add_content($wrapper_hack, outer) { 
    $("<h4>", { 
     text: outer.Name + " (" + outer.Perimeter + ")" 
    }).hide().appendTo($wrapper_hack).show(4000, function() { 
     $.ajax({ 
      /* ... */ 
      success: function(contacts) { 
       /* Build your <p> and append it to $wrapper_hack */ 
      } 
     }); 
    }); 
} 

的想法是要追加的內容，只是安裝在右側<h4>，而不是追加到#result的東西;那麼，所有東西都會以正確的順序出現，因爲您已經在HTML元素嵌套中嵌入了正確的順序。你需要add_content作爲一個單獨的功能正確定位$wrapper_hack和outer只在所需的環境下，從而避免了通常關閉的問題。