Affiche une chaîne de caractères
requête Ajax est terminée, jQuery déclenche l'événement ajaxComplete pour exécuter tous les gestionnaires d'événements enregistrés avec 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 lesxhr.responseXMLouxhr.responseHTMLpour 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 : 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 :
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>