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

89

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?

Sabanito
quelle

Antworten:

37

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

ceejayoz
quelle
Dies funktionierte besser für mich, da meine Kontrolle viele Male mit HtmlHelper gerendert wurde. Vielen Dank!
Sabanito
Das hat bei mir funktioniert! Ich habe ajaxSend und ajaxSuccess verwendet, aber manchmal wurden mehrere Ajax-Anfragen gesendet, und ich wollte nur einmal am Anfang und einmal am Ende ein Stück Code ausführen. ajaxStart und ajaxStop waren genau das, wonach ich gesucht habe! Vielen Dank
ScottyG
2
Im Jahr 2019 sind Links veraltet
Kristian Nissen
228

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

Mehr Infos hier

Sivabudh
quelle
Dies beantwortet tatsächlich die Frage. Vielen Dank.
Dave Salomon
Ein Liner und kurze Lösung sehr schön
MSTdev
24
 $(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);
 });
etgregor
quelle
Scheint eine gute Lösung zu sein, aber haben Sie ein Problem mit der "maximalen Aufrufstapelgröße" festgestellt?
Mikel
11

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. :) :)

Toji
quelle
4
Es ist wichtig, auf null zu prüfen, um festzustellen, ob das Anforderungsobjekt vorhanden ist. Wenn es jedoch nicht null ist, sollten Sie wirklich prüfen request.readyState > 0 && request.readyState < 4, ob eine "aktive" Anforderung ermittelt wurde, da readyState 0 angibt, dass trotz der Erstellung des Objekts keine Webanforderung initiiert wurde .
Nathan Taylor
1

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 () {

            }
        });
vibs2006
quelle