Comment afficher la barre de progression pendant le chargement Ajax ?

Affichage de la barre de progression pendant le chargement Ajax

Lors de la récupération de données à l'aide d'Ajax, vous pouvez rencontrer un retard dans l'attente de la réponse du serveur. Pour améliorer l'expérience utilisateur, vous pouvez afficher une barre de progression pour indiquer l'état de chargement. Cet article vous guidera dans l'affichage d'une barre de progression à l'aide d'Ajax.

Code Ajax :

Le code Ajax fourni utilise jQuery pour gérer la récupération de données côté client et afficher les résultats. .

$(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);
            }
        });

    });
});

Ajout d'un écouteur d'événement de progression :

Pour ajouter un écouteur d'événement de progression à la requête Ajax, utilisez l'option xhr comme suit :

$.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
});

Ce code enregistre les écouteurs d'événements pour les événements de progression de téléchargement et de téléchargement, vous permettant de suivre la progression et de mettre à jour la barre de progression en conséquence.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!