Comment utiliser jQuery pour ajouter une barre de progression au contenu chargé en Ajax ?

Afficher la barre de progression pendant le contenu chargé en Ajax

Dans le développement Web, il est souvent souhaitable d'afficher une barre de progression pendant que les données sont récupérées et chargées dans une page via Ajax. Cela permet de fournir un retour visuel aux utilisateurs, indiquant que le processus est en cours.

Exemple de code Ajax :

Prenons un exemple dans lequel vous avez une liste déroulante qui déclenche un Requête Ajax lors de la sélection, récupération des données d'une base de données :

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

Ajout d'une barre de progression à l'aide de jQuery :

Pour ajouter une barre de progression à cette opération Ajax, vous peut utiliser la méthode xhr() dans la configuration $.ajax() :

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

Ce code crée un objet XMLHttpRequest et ajoute des écouteurs d'événements pour la progression du téléchargement et du téléchargement. Au fur et à mesure du transfert des données, la variable percentComplete fournira une valeur que vous pourrez utiliser pour mettre à jour la barre de progression sur votre page Web.

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!