Wie wird der Fortschrittsbalken während des Ajax-Ladens angezeigt?

Anzeige des Fortschrittsbalkens während des Ajax-Ladens

Beim Datenabruf mit Ajax kann es beim Warten auf die Serverantwort zu einer Verzögerung kommen. Um die Benutzererfahrung zu verbessern, können Sie einen Fortschrittsbalken anzeigen, der den Ladestatus anzeigt. Dieser Artikel führt Sie durch die Anzeige eines Fortschrittsbalkens mit Ajax.

Ajax-Code:

Der bereitgestellte Ajax-Code verwendet jQuery, um den clientseitigen Datenabruf zu verarbeiten und Ergebnisse anzuzeigen .

$(function() {
    $("#client").on("change", function() {
      var clientid=$("#client").val();

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

    });
});

Hinzufügen eines Fortschrittsereignis-Listeners:

Um der Ajax-Anfrage einen Fortschrittsereignis-Listener hinzuzufügen, verwenden Sie die xhr-Option wie folgt:

$.ajax({
    xhr: function() {
        var xhr = new window.XMLHttpRequest();

        // Upload progress event listener
        xhr.upload.addEventListener("progress", function(evt) {
            if (evt.lengthComputable) {
                // Calculate upload progress percentage
                var percentComplete = evt.loaded / evt.total;
                // Update progress bar (example: display the percentage)
                console.log(percentComplete);
            }
        });

        // Download progress event listener
        xhr.addEventListener("progress", function(evt) {
            if (evt.lengthComputable) {
                // Calculate download progress percentage
                var percentComplete = evt.loaded / evt.total;
                // Update progress bar (example: display the percentage)
                console.log(percentComplete);
            }
        });

        return xhr;
    },
    // Rest of the Ajax options remain the same
});

Dieser Code registriert Ereignis-Listener für Upload- und Download-Fortschrittsereignisse, sodass Sie den Fortschritt verfolgen und den Fortschrittsbalken entsprechend aktualisieren können.

Das obige ist der detaillierte Inhalt vonWie wird der Fortschrittsbalken während des Ajax-Ladens angezeigt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!