jQuery-Studiennotizen – Ajax-Operation (3) – Prozessverarbeitung

Beobachtungsfunktion

Die Funktionen ajaxStart und ajaxStop können als Beobachtungsfunktionen verwendet werden, und wir können die Rückruffunktion der Beobachtungsfunktion verwenden, um eine entsprechende Verarbeitung durchzuführen.

Die Callback-Funktion von ajaxStart wird ausgelöst, wenn die Ajax-Anfrage startet und keine weitere Übertragung erfolgt ist.
Wenn die letzte aktive Anfrage beendet ist, wird die über ajaxStop registrierte Rückruffunktion ausgeführt.
Da die Beobachtungsfunktion global ist, muss sie mit $(document) aufgerufen werden. Wir testen die beiden Funktionen mithilfe der Ajax-Methode, um ein Bildbeispiel zu erhalten:
Die aktuelle Seite ist:

<div></div>
<button>load</button>

Nach dem Login kopieren

Der Inhalt von test.html im selben Verzeichnis ist:

<img src="avatar.jpg" />

Nach dem Login kopieren

Möchten Sie ein Bild laden, nachdem Sie auf die Schaltfläche geklickt haben:

 $('button').click(function() {
  $('div').load('test.html');
 });

Nach dem Login kopieren

An dieser Stelle können wir die Funktionen ajaxStart und ajaxStop verwenden, um Eingabeaufforderungen hinzuzufügen:

 $(document).ajaxStart(function() {//
  alert('load a picture');
 }).ajaxStop(function() {
  alert('show a picture');
 });
 $('button').click(function() {
  $('div').load('test.html');
 });

Nach dem Login kopieren

Nachdem Sie zu diesem Zeitpunkt auf die Schaltfläche geklickt haben, werden Sie aufgefordert, ein Bild zu laden, bevor das Bild geladen wird, und nach dem Laden wird ein Bild angezeigt.

Fehlerbehandlung

Die am häufigsten verwendete Methode ist die globale AjaxError-Methode. Wenn wir eine Datenanforderung an eine Seite senden, die nicht existiert:

 $(document).ajaxError(function() {//
  alert('load failed!');
 });
 $('button').click(function() {
  $('div').load('noexsited.html');
 });

Nach dem Login kopieren

Nachdem Sie zu diesem Zeitpunkt auf die Schaltfläche geklickt haben:

Für Nicht-Lademethoden können Sie auch die Fail-Methode zur Verkettungsverarbeitung verwenden:

 $('button').click(function() {
  $.get('noexsited.html', function(data) {

  }).fail(function(jqXHR) {
   alert('status is ' + jqXHR.status);
  });
 });

Nach dem Login kopieren