表格沒有添加到沒有警報消息的div

Question

我無法將表格添加到div，顯式調用了警報框。

var content = "<table class='table1'>"; 
$.getJSON("/controller/Method", { 
    param1: val1 
}, function (data) { 
    $.each(data, function (key, value) { 

     content += "<tr><td class='class1'>text1</td></tr>"; 

    }); 
    content += "</table>"; 
}); 

alert(content); 

$('#div1').append(content); 

如果我刪除警告框，表格不會添加到div。

我不明白爲什麼表只會添加在頁面閃爍像警戒框。

奇怪！

Answer 1

緊接在AJAX調用之後，您將table附加到div而不考慮執行此異步操作的時間，但實際上並未等待任何結果從服務器返回並剛剛離開。另一方面，當你調用alert函數時，幸運的是（！），你實際上是在「等待」服務器的結果到達（可能大概是毫秒）。

另外，追加僅在success回調錶：

var content = "<table class='table1'>"; 
$.getJSON("/controller/Method", 
     { 
      param1: val1 
     } 
     , function (data) { 
      $.each(data, function (key, value) { 
        content += "<tr><td class='class1'>text1</td></tr>"; 
      }); 

      $('#div1').append(content); 
      $('#div1').append("</table>"); 
     }); 

Answer 2

$.getJSON是一個異步調用，因此JavaScript解釋器不等待它後，它移動到代碼之前完成。警報有效地延遲了解釋器允許異步調用及時完成追加。你應該做的是把追加的代碼成功回調中：

var content = "<table class='table1'>"; 
$.getJSON("/controller/Method", 
    { 
     param1: val1 
    } 
    , function (data) { 
     $.each(data, function (key, value) { 

       content += "<tr><td class='class1'>text1</td></tr>"; 

     }); 
     content += "</table>"; 
     $('#div1').append(content); 
    }); 

Answer 3

請注意的getJSON發送異步請求，這意味着它不會等待請求的響應。 Yuo應該試試這個：

$.ajax({ 
      type: "GET", 
      url: "/controller/Method", 
      contentType: "application/json", 
      dataType: "json", 
      data: {}, 
      async:false, 
      success: function (data) { 
      $.each(data, function (key, value) { 

     content += "<tr><td class='class1'>text1</td></tr>"; 

     }); 
     content += "</table>"; 
      }, 
      error: function (err) { 
     alert("Error"); 
      } 
     }); 

    $('#div1').append(content); 

「asyns：false」將通過使ajax請求同步來解決您的問題。