Datenlade-Nachricht auf der Schaltfläche funktioniert nicht mit Ajax-Aufruf - Javascript, jquery, html, ajax

Ich mache einen Ajax-Aufruf, um einige Daten nach POST zu bringen, und es dauert lange, bis das Ergebnis erhalten wird. Ich möchte also eine Daten-Lademeldung auf meiner Schaltfläche, bis meine Ajax-Anforderung abgeschlossen ist. Hier ist mein Javascript-Code.

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

Hier ist meine Button-Definition in meiner HTML-Seite

<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>

Wenn ich den AJAX-Anruf auskommentiere, kann ich die Datenlademeldung auf der Schaltfläche sehen, aber wenn der AJAX-Anruf zulässig ist, kann ich die Datenlademeldung nicht sehen. Wie kann ich das machen?

Vielen Dank.

Antworten:

Das Problem ist, weil Sie verwenden async: false. Dadurch wird der Browser gesperrt, bis die Anforderung abgeschlossen ist. Daher kann die Benutzeroberfläche in diesem Zeitraum nicht aktualisiert werden. Um das Problem zu lösen, entfernen Sie async: false:

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

Die Verwendung von async: false wird aus diesem Grund als schreckliche Praxis angesehen. Ihre Verwendung sollte unter allen Umständen vermieden werden.