Wie füge ich mit jQuery einen Fortschrittsbalken zu Ajax-geladenen Inhalten hinzu?

Fortschrittsbalken während des Ajax-geladenen Inhalts anzeigen

In der Webentwicklung ist es oft wünschenswert, einen Fortschrittsbalken anzuzeigen, während Daten abgerufen und geladen werden in eine Seite über Ajax. Dies trägt dazu bei, den Benutzern ein visuelles Feedback zu geben, das darauf hinweist, dass der Prozess noch läuft.

Ajax-Codebeispiel:

Betrachten wir ein Beispiel, in dem Sie ein Dropdown-Feld haben, das eine auslöst Ajax-Abfrage bei Auswahl, Abrufen von Daten aus einer Datenbank:

<code class="javascript">$("#client").on("change", function() {
  var clientid = $("#client").val();

  $.ajax({
    type: "post",
    url: "clientnetworkpricelist/yourfile.php",
    data: "title=" + clientid,
    success: function(data) {
      $("#result").html(data);
    }
  });
});</code>

Hinzufügen eines Fortschrittsbalkens mit jQuery:

Um diesem Ajax-Vorgang einen Fortschrittsbalken hinzuzufügen, müssen Sie kann die xhr()-Methode innerhalb der $.ajax()-Konfiguration verwenden:

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

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

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

    return xhr;
  },
  type: 'POST',
  url: &quot;/&quot;,
  data: {},
  success: function(data){
        // Do something success-ish
  }
});</code>

Dieser Code erstellt ein XMLHttpRequest-Objekt und fügt Ereignis-Listener für den Upload- und Download-Fortschritt hinzu. Während die Daten übertragen werden, stellt die Variable „%Complete“ einen Wert bereit, mit dem Sie den Fortschrittsbalken auf Ihrer Webseite aktualisieren können.

Das obige ist der detaillierte Inhalt vonWie füge ich mit jQuery einen Fortschrittsbalken zu Ajax-geladenen Inhalten hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!