logo oujood
🔍

jQuery AJAX La  méthode ajaxComplete()  spécifie une fonction à exécuter lorsque une requête AJAX se termine.

OUJOOD.COM

Définition et Usage La  méthode ajaxComplete() 

La méthode ajaxComplete() définit une fonction à exécuter lorsque une requête AJAX est terminée.
Contrairement à ajaxSuccess(), les fonctions spécifiées avec la méthode ajaxComplete() seront exécute lorsque la requête  est terminée, même s'il n'est pas réussie.

Syntaxe

$(sélecteur).ajaxComplete(function(événements,XMLHttpRequest, ajaxOptions)


Paramètre Description
function ( Event,xhr,options) Obligatoire. Spécifie la fonction à exécuter lorsque la demande se termine

Pour observer cette méthode en action, nous allons mettre en place une requête Ajax pour charger un fichier :

<button class="telecharger"> Télécharger </button>
<div class="resultat"></div>
<div class="message"></div>

Nous allons joindre notre gestionnaire d’événements (fonction) à un élément :

$('.message').ajaxComplete(function() {
$(this).text('La requête ajax est terminée.');
});

Maintenant, nous pouvons faire une requête Ajax en utilisant n'importe quelle méthode de jQuery dans notre exemple
Nous téléchargeons un fichier texte et affichons son contenu dans le dive resultat  vous pouvez utiliser n’importe quel ficher texte ou télécharger celui là:

$('.telecharger').click(function() {
$('.resultat').load('demo_ajax_load.txt');
});

Lorsque l'utilisateur clique sur le bouton télécharger et la requête Ajax est terminé, le message est affiché.
Note : Parce que la méthode  .ajaxComplete() est implémentée comme une méthode d'instances d'objet jQuery, nous pouvons utiliser le mot-clé this comme nous le faisons ici pour désigner les éléments sélectionnés au sein de la fonction de rappel.
Tous les gestionnaires de ajaxComplete sont appelés, peu importe quelle requête Ajax a été achevée. Si nous voulons établir une distinction entre les demandes, nous devrions utiliser les paramètres passés au gestionnaire. Chaque fois qu'un gestionnaire d'événements ajaxComplete est exécuté, il est passé comme paramètres : l'objet de l'événement, l'objet XMLHttpRequest et l'objet de paramètres qui était utilisé dans la création de la demande. Par exemple, nous pouvons limiter notre rappel de traiter seulement les événements traitant d'une URL particulière


Note : Vous pouvez obtenir le contenu ajax retourné en regardant respectivement les xhr.responseXML ou xhr.responseHTML pour xml et html.

$('.message').ajaxComplete(function(event, xhr, settings) {
if (settings.url == 'demo_ajax_load.txt') {
$(this).text(' La requête ajax est terminée. Le resultat est : '+ xhr.responseHTML); } });

Exemple : Afficher un message lorsqu'une requête Ajax se termine.

Exemple :    📝  Copier le code 

 <!DOCTYPE html> 
 <html lang="fr">
 <head>
      <meta charset="utf-8">
   <title>jQuery AJAX la méthode ajaxComplete()</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- code jQuery pour montrer le fonctionnement de la méthode ajaxComplete() -->
<script>
    $(document).ready(function(){
    $(document).ajaxComplete(function() {
    $('.message').html("<br><br>La requête ajax est terminée.");
  });
  $('.telecharger').click(function() {
    $('.resultat').load('//www.oujood.com/jquery/test/test1.txt');
  });
  });
  </script>
    <style>
  .message{ color : red;}
    </style>
</head>
<body>

	<h1 style="color:green">www.oujood.com</h1>
	
	<h2>jQuery la méthode ajaxComplete()</h2>
	
	<div id="div_content">
	</div>
  <button class="telecharger"> Télécharger </button>
  <div class="resultat"></div>
  <div class="message"></div>
  <script>
  </script>
  </body>
  </html>

Autre exemple :

Afficher une image comme  indicateur de « chargement »  pendant qu'une requête AJAX est exécutée :

code     Voir notre guide des propriété css pour plus de détail sur les propriétés css

Code

📝  Copier le code 

<!DOCTYPE html> 
 <html lang="fr">
 <head>
      <meta charset="utf-8">
   <title>jQuery AJAX la méthode ajaxComplete()</title>
<script type="text/javascript"
  src=" https://code.jquery.com/jquery-3.6.0.min.js "></script>
  <script>
  $(document).ready(function(){
  $(document).ajaxStart(function(){
      $("#wait").css("display","block");
    });
  $(document).ajaxComplete(function(){
      $("#wait").css("display","none");
    });
    $("button").click(function(){
      $("#txt").load("//www.oujood.com/jquery/test/test1.txt");
    });
  });
  </script>
  </head>
<body>

	<h1 style="color:green">www.oujood.com</h1>
	
	<h2>jQuery la méthode ajaxComplete()</h2>
	<h3>Laiser ajax faire le
  travail</h3>
	<div id="txt"></div>
  <button>Changer Contenu</button>
  <div id="wait"
  style=" display:none;width:69px;height:89px;position:absolute;top:50%;left:5%;padding:10px;"><img
  src='//www.oujood.com/jquery/demo_wait.gif' width="64" height="64" /><br
  />Loading..</div>
  </body>
  </html>
     jQuery Liste des méthodes AJAX     
Par gerywa 25 juillet 2014