Comment afficher une barre de progression lors du chargement de données AJAX avec jQuery ?

Affichage d'une barre de progression lors du chargement de données avec AJAX

Lors de l'exécution d'une requête AJAX qui récupère des données d'une base de données, cela peut prendre un certain temps pour que les résultats soient renvoyés. Pour fournir des commentaires à l'utilisateur pendant ce processus de chargement, une barre de progression peut être affichée.

Création d'une barre de progression avec jQuery

La bibliothèque jQuery propose des méthodes intégrées qui facilitent la création et la manipulation des barres de progression. Pour ajouter une barre de progression à votre appel AJAX, vous pouvez attacher un écouteur d'événement à l'objet xhr :

<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>

Dans ce code :

• L'écouteur d'événement de progression pour le téléchargement La propriété suit la progression de l'envoi des données au serveur.
• L'écouteur d'événement progress pour l'objet xhr suit la progression de la réception des données du serveur.
• Vous pouvez utiliser la variable percentComplete pour déterminer la pourcentage d'achèvement et mettre à jour la barre de progression en conséquence.
• Une fois les données récupérées et traitées avec succès, la barre de progression peut être masquée et les résultats peuvent être affichés.

En implémentant cela approche, vous pouvez améliorer vos rappels AJAX avec une barre de progression conviviale, fournissant un retour visuel pendant les opérations de chargement de données.

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!