Comment puis-je afficher un indicateur de chargement lors de requêtes AJAX asynchrones ?

Affichage d'un indicateur de chargement lors de requêtes AJAX asynchrones

Dans le domaine de la programmation, il est courant de rencontrer des requêtes asynchrones, comme celle effectuée par $.ajax. Ces requêtes récupèrent des données en arrière-plan, permettant aux utilisateurs de continuer à interagir avec l'application pendant le traitement de la requête. Cependant, dans certains scénarios, il est souhaitable de fournir un retour visuel aux utilisateurs, indiquant qu'une requête asynchrone est actuellement en cours.

Pour ce faire, une image peut être affichée pour signifier l'état actif de la requête. L'extrait de code suivant fournit un exemple de la façon d'effectuer une requête asynchrone :

$.ajax({
  url: uri,
  cache: false,
  success: function(html){
    $('.info').append(html);
  }
});

Pour afficher une image de chargement pendant la requête, elle peut être affichée avant que la requête ne soit effectuée et masquée une fois celle-ci terminée :

$('#loading-image').show();
$.ajax({
      url: uri,
      cache: false,
      success: function(html){
        $('.info').append(html);
      },
      complete: function(){
        $('#loading-image').hide();
      }
    });

Alternativement, la solution plus générale consistant à lier l'image de chargement aux événements globaux ajaxStart et ajaxStop peut être utilisée. Cette approche garantit que l'image de chargement est affichée pour tous les événements AJAX :

$('#loading-image').bind('ajaxStart', function(){
    $(this).show();
}).bind('ajaxStop', function(){
    $(this).hide();
});

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!