Wie zeige ich beim Laden von AJAX-Daten mit jQuery einen Fortschrittsbalken an?

Anzeige eines Fortschrittsbalkens beim Laden von Daten mit AJAX

Beim Durchführen einer AJAX-Abfrage, die Daten aus einer Datenbank abruft, kann es einige Zeit dauern damit die Ergebnisse zurückgegeben werden. Um dem Benutzer während dieses Ladevorgangs Feedback zu geben, kann ein Fortschrittsbalken angezeigt werden.

Erstellen eines Fortschrittsbalkens mit jQuery

Die jQuery-Bibliothek bietet integrierte Methoden die die Erstellung und Bearbeitung von Fortschrittsbalken erleichtern. Um Ihrem AJAX-Aufruf einen Fortschrittsbalken hinzuzufügen, können Sie einen Ereignis-Listener an das xhr-Objekt anhängen:

<code class="javascript">$.ajax({
    xhr: function() {
        var xhr = new window.XMLHttpRequest();

        // Upload progress
        xhr.upload.addEventListener("progress", function(evt) {
            if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total;
                // Update the progress bar here
            }
        }, false);

        // Download progress
        xhr.addEventListener("progress", function(evt) {
            if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total;
                // Update the progress bar here
            }
        }, false);

        return xhr;
    },
    type: 'POST',
    url: "/",
    data: {},
    success: function(data) {
        // Hide the progress bar and display the results
    }
});</code>

In diesem Code:

• Der Fortschritts-Ereignis-Listener für den Upload Die Eigenschaft verfolgt den Fortschritt des Sendens von Daten an den Server.
• Der Fortschrittsereignis-Listener für das xhr-Objekt verfolgt den Fortschritt des Empfangens von Daten vom Server.
• Sie können die Variable „percentComplete“ verwenden, um die zu bestimmen Abschlussprozentsatz und aktualisieren Sie den Fortschrittsbalken entsprechend.
• Nachdem die Daten erfolgreich abgerufen und verarbeitet wurden, kann der Fortschrittsbalken ausgeblendet und die Ergebnisse angezeigt werden.

Indem Sie dies implementieren Ansatz können Sie Ihre AJAX-Rückrufe mit einem benutzerfreundlichen Fortschrittsbalken verbessern, der während des Datenladevorgangs visuelles Feedback liefert.

Das obige ist der detaillierte Inhalt vonWie zeige ich beim Laden von AJAX-Daten mit jQuery einen Fortschrittsbalken an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!