ボタン上のデータ読み込みメッセージがajaxコールで機能しない

Question

POSTにajax呼び出しを行ってデータを取得しようとしていますが、結果を取得するのに時間がかかります。そのため、私のAjaxリクエストが終了するまで、ボタンにデータロードメッセージが必要です。ここに私のJavaScriptコードです。ここで

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

私はボタンではなく、AJAX呼び出しが発生することができ、私はできればデータのロードメッセージを見ることができますAJAX呼び出しをコメントアウトした場合、私の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> 

ですデータロードメッセージが表示されません。どうすればこの作品を作れますか？

ありがとうございました。

Answer 1

問題はasync: falseを使用しているためです。これにより、要求が完了するまでブラウザーがロックされるため、この期間にUIを更新することはできません。問題を解決するために、async: falseを削除します。async: falseの

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

を使用することは、まさにこの理由のために恐ろしい習慣であると考えられています。その使用は、すべての費用をかけて避けるべきです。