JQuery Ajax Loading mit AjaxStart/AjaxSetup

JQuery Ajax Laden mit ajaxStart() und ajaxStop()

Diese Anleitung zeigt, wie die Methoden von JQuery ajaxStart() und ajaxStop() zum Verwalten von Ladeindikatoren während von AJAX -Anforderungen verwaltet werden. Wir werden mehrere Ansätze abdecken, einschließlich der direkten Verwendung dieser Methoden, der Einbeziehung dieser in Ajax -Anrufe und der Nutzung von ajaxSetup().

Methode 1: Direkte Verwendung von ajaxStart() und ajaxStop()

Diese Methode zeigt ein Ladebild an und deaktiviert die Schaltfläche eines Formulars, während eine AJAX -Anforderung im Gange ist. Sobald die Anforderung abgeschlossen ist, ist das Bild versteckt und die Schaltfläche wieder aufgenommen.

<code class="language-javascript">var $form = $('#form');

$form.find('.loading')
  .hide()
  .ajaxStart(function() {
      $(this).show();
      $form.find('.submit').attr('disabled', 'disabled');
  })
  .ajaxStop(function() {
      $(this).hide();
      $form.find('.submit').removeAttr('disabled');
  });</code>

Methode 2: Ladeanzeige vor und complete Handler

Alternativ können Sie den Ladeindikator vor dem AJAX -Aufruf anzeigen und den complete Handler verwenden, um ihn zu verbergen.

<code class="language-javascript">// Show loading image, disable submit button
$form.find('.msg').remove();
$form.find('.loading').show();
$form.find('.submit').attr('disabled', 'disabled');

// AJAX call
$.ajax({
    // ... your AJAX settings ...
    complete: function() {
        $form.find('.loading').hide();
        $form.find('.submit').removeAttr('disabled');
    }
});</code>

Methode 3: Verwenden Sie ajaxSetup() für globales Handling

Verwenden Sie für eine globale Lösung, die alle AJAX -Anforderungen betrifft, ajaxSetup(). Dies verbirgt das Ladebild und ermöglicht das Formular nach alle ajax addits.

<code class="language-javascript">$.ajaxSetup({
    complete: function() {
        $form.find('.loading').hide();
        $form.find('.submit').removeAttr('disabled');
    }
});</code>

häufig gestellte Fragen

Der folgende Q & A -Abschnitt befasst sich mit häufigen Fragen zur Verwendung von ajaxStart(), ajaxStop() und verwandten JQuery Ajax -Methoden. Beachten Sie, dass der ursprüngliche FAQ -Abschnitt für Klarheit und Zuversicht kondensiert und umformuliert wurde.

• ajaxStart() Zweck: ajaxStart() führt eine Funktion aus, wenn eine AJAX -Anforderung beginnt und keine anderen Anforderungen aktiv sind. Es ist ideal, um Ladeindikatoren anzuzeigen.

• Zeigen Sie einen Ladespinner: Erstellen Sie ein Spinnerelement (z. B. <div id="spinner">). Verwenden Sie <code>$(document).ajaxStart(function(){ $("#spinner").show(); });, um es anzuzeigen.

• Versteck des Spinner $(document).ajaxStop(function(){ $("#spinner").hide(); });

• mit spezifischen Anforderungen:

  bind an das Element, das die AJAX -Anforderung initiiert (z. B. ajaxStart()). ajaxStart() $("#myButton").ajaxStart(...)

• vs.

  : ajaxStart() Auslöser nur, wenn keine anderen AJAX -Anforderungen ausgeführt werden; ajaxSend() Auslöser für jede Anfrage. ajaxStart() ajaxSend()

Fehlerbehandlung:
• Verwenden Sie

  neben , um Fehler zu behandeln. Zum Beispiel: ajaxError()

• Kombinieren Sie sich mit anderen AJAX -Methoden: ajaxStart() funktioniert mit anderen jQuery Ajax -Methoden (ajaxStop(), ajaxComplete(), ajaxError() usw.).

• Verwenden mit Kurzmethoden: ajaxStart() Funktionen mit Kurzmethoden wie $.get() und $.post().

Diese überarbeitete Antwort liefert eine prägnantere und organisiertere Erklärung von JQuery Ajax -Ladetechniken, die die wichtigsten Aspekte und gemeinsamen Fragen behandelt. Das Bild bleibt in seiner ursprünglichen Position.