$.ajax-Fehler in jQuery behandeln

Der heutige Beitrag behandelt die Behandlung von Fehleranfragen in AJAX in jQuery.

Behandeln Sie den $.ajax-Fehler in jQuery

Die AJAX-Post-Anforderung von jQuery führt eine asynchrone HTTP-Anforderung (AJAX) aus.

Syntax:

jQuery.ajax([settings]).fail((jqXHR, textStatus) => {});
jQuery.ajax(url[, settings]).fail((jqXHR, textStatus) => {});

Wo:

1. URL ist die Zeichenfolge, die die URL enthält, an die die Anfrage gesendet wird.
2. settings sind die Schlüssel/Wert-Paar-Objekte, die die AJAX-Anfrage konfigurieren. Alle Einstellungen sind optional; mit $.ajaxSetup() kann für jede Option ein Standardwert gesetzt werden.

Der .fail()-Ansatz ersetzt den veralteten .error()-Ansatz. Dies ist ein alternatives Konstrukt zur Error-Callback-Option.

Schlägt die Anfrage fehl, wird die Callback-Option error innerhalb der AJAX-Konfiguration aufgerufen. Es erhält den jqXHR, eine Zeichenfolge, die den Fehlertyp angibt, und gegebenenfalls ein Ausnahmeobjekt.

Einige eingebaute Fehler geben einen String als Ausnahmeobjekt zurück, wie zum Beispiel: abort, timeout, no transport.

$.ajax() gibt das jQuery-Objekt XMLHttpRequest (jqXHR) zurück, das eine Obermenge des nativen XMLHttpRequest-Objekts des Browsers ist.

Lassen Sie es uns anhand des folgenden Beispiels verstehen.

Hinweis: Die folgenden Codes können nicht unverändert ausgeführt werden und haben keine Ausgabe. Es muss dem vorhandenen Code hinzugefügt werden, um die Ausgaben anzuzeigen.

HTML Quelltext:

<form id="myForm">
  <label for="name">Name</label>
  <input id="name" name="name" type="text" value="Smith" />
  <input type="submit" value="Send" />
</form>

JavaScript-Code:

$('#myForm').submit(function(event) {
  event.preventDefault();
  $.ajax({
     method: 'POST',
     url: '/open/hello-world',
     data: {name: 'Smith', location: 'United State'},
     error: function(jqXHR, thrownError) {
       alert(jqXHR.status);
       alert(thrownError);
     }
   })
      .done(function(msg) {
        alert('Data Saved: ' + msg);
      })
      .fail((jqXHR, errorMsg) => {alert(jqXHR.responseText, errorMsg)});
})

Im obigen Beispiel wird nach Absenden des Formulars durch den Benutzer ein AJAX-Aufruf mit der angegebenen URL und den angegebenen Parametern an den Server gesendet. Wenn der Server mit einer erfolgreichen Nachricht zurückkehrt, können Sie die Nachricht auf der Konsole drucken oder den Benutzer mit der entsprechenden Nachricht benachrichtigen.

Wenn der Server mit einer Fehlermeldung zurückkehrt, können Sie den Fehler entweder mit dem Errorhandler oder .fail() abfangen und den Benutzer mit der entsprechenden Fehlermeldung benachrichtigen.