Woher weiß ich, ob bei jQuery eine Ajax-Anfrage aussteht?

Ich habe einige Probleme mit einem von uns erstellten jQuery-Steuerelement. Angenommen, Sie haben eine Dropdown-Liste, in der Sie die ID des gesuchten Elements eingeben können. Wenn Sie die EINGABETASTE drücken oder den Fokus in einem Textfeld verlieren, wird über jQuery überprüft, ob die eingegebene ID korrekt ist, und es wird eine Warnung angezeigt, falls dies nicht der Fall ist 't.

Die Sache ist, dass, wenn ein gewöhnlicher Benutzer einen ungültigen Wert eingibt und durch Drücken der Senden-Schaltfläche den Fokus verliert, der jQuery-Beitrag zurückkehrt, nachdem das Senden des Formulars gesendet wurde.

Kann ich auf irgendeine Weise überprüfen, ob Async-Anforderungen von jQuery verarbeitet werden, sodass ich das Senden des Formulars nicht zulasse?

Sie können ajaxStart und ajaxStop verwenden , um zu verfolgen, wann Anforderungen aktiv sind.

$.active Gibt die Anzahl der aktiven Ajax-Anforderungen zurück.

Mehr Infos hier

 $(function () {
        function checkPendingRequest() {
            if ($.active > 0) {
                window.setTimeout(checkPendingRequest, 1000);
                //Mostrar peticiones pendientes ejemplo: $("#control").val("Peticiones pendientes" + $.active);
            }
            else {

                alert("No hay peticiones pendientes");

            }
        };

        window.setTimeout(checkPendingRequest, 1000);
 });

Die Funktion $ .ajax () gibt ein XMLHttpRequest-Objekt zurück. Speichern Sie dies in einer Variablen, auf die über das Ereignis "OnClick" der Schaltfläche "Senden" zugegriffen werden kann. Wenn ein Senden-Klick verarbeitet wird, überprüfen Sie, ob die Variable XMLHttpRequest lautet:

1) null, was bedeutet, dass noch keine Anfrage gesendet wurde

2) dass der readyState-Wert 4 (Loaded) ist. Dies bedeutet, dass die Anforderung erfolgreich gesendet und zurückgegeben wurde.

Geben Sie in beiden Fällen true zurück und lassen Sie die Übermittlung fortfahren. Andernfalls geben Sie false zurück, um die Übermittlung zu blockieren und dem Benutzer einen Hinweis darauf zu geben, warum die Übermittlung nicht funktioniert hat. :) :)

Wir müssen die Methode $ .ajax.abort () verwenden, um die Anforderung abzubrechen, wenn die Anforderung aktiv ist. Dieses Versprechenobjekt verwendet die Eigenschaft readyState , um zu überprüfen, ob die Anforderung aktiv ist oder nicht.

HTML

<h3>Cancel Ajax Request on Demand</h3>
<div id="test"></div>
<input type="button" id="btnCancel" value="Click to Cancel the Ajax Request" />

JS-Code

//Initial Message
var ajaxRequestVariable;
$("#test").html("Please wait while request is being processed..");

//Event handler for Cancel Button
$("#btnCancel").on("click", function(){
if (ajaxRequestVariable !== undefined)

if (ajaxRequestVariable.readyState > 0 && ajaxRequestVariable.readyState < 4)
{
  ajaxRequestVariable.abort();
  $("#test").html("Ajax Request Cancelled.");
}
});

//Ajax Process Starts
ajaxRequestVariable = $.ajax({
            method: "POST",
            url: '/echo/json/',
            contentType: "application/json",
            cache: false,
            dataType: "json",
            data: {
        json: JSON.encode({
         data:
             [
                            {"prop1":"prop1Value"},
                    {"prop1":"prop2Value"}
                  ]         
        }),
        delay: 11
    },

            success: function (response) {
            $("#test").show();
            $("#test").html("Request is completed");           
            },
            error: function (error) {

            },
            complete: function () {

            }
        });