按鈕上的數據加載消息不與ajax調用

Question

我正在做一個ajax調用POST一些數據，它需要很長時間才能得到結果。所以我想要一個數據加載消息在我的按鈕上，直到我的ajax請求完成。這裏是我的JavaScript代碼。

$("#add").button('loading'); 
$.ajax({ 
    type: 'POST', 
    url: url, 
    async: false, 
    success: function(data) { 
     $("#add").button('reset'); 
    } 
}); 

這裏是我的html頁面我的按鈕定義

<div class="col-lg-12"> 
    <button id="add" class=" btn btn-success btn-sm info" type="button" data-loading-text="Adding" onclick="create()">Add New</button> 
</div> 

如果我註釋掉AJAX調用我可以看到按鈕上的數據加載消息，但如果讓AJAX調用發生，我可以看不到數據加載消息。我該如何做這項工作？

謝謝。

Answer 1

問題是因爲您使用的是async: false。這將鎖定瀏覽器直到請求完成，因此在此期間無法更新UI。爲了解決這個問題，刪除async: false：

$("#add").button('loading'); 
$.ajax({ 
    type: 'POST', 
    url: url, 
    success: function(data) { 
     $("#add").button('reset'); 
    } 
}); 

採用async: false被認爲是這個原因可怕的做法。應該不惜一切代價避免使用它。