jordane45
Messages postés38244Date d'inscriptionmercredi 22 octobre 2003StatutModérateurDernière intervention 4 octobre 2024
-
Modifié le 14 janv. 2023 à 00:34
Exemple ajax simple en jquery + méthode de débuggage
Exemple simple :
On créé une page ( index.php par exemple) dans laquelle nous ferons notre appel ajax (en javascript Jquery)
Le but étant d'afficher une information dans la page suite au clic sur le bouton (sans avoir à recharger complètement la page)
<!Doctype html>
<html>
<head>
<title>Test ajax</title>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
</head>
<body>
<button id="go">Afficher le contenu en ajax</button>
<div id="zone_affichage">
<!-- Ici sera affiché le résultat de l'appel ajax -->
</div>
<script>
const urlFichierAjx = "./monscriptajax.php";
var data = {id:10}; //par exemple, je passe une variable id à mon script php ajax
//lors du clic sur le bouton
$("#go").click(function(){
var ajxRes = $.ajax({
type: "POST",
url: urlFichierAjx,
data: data,
dataType: "json"
}).done(function (reponse) {
//si la réponse du script ajax est ok
console.log('reponse ajax',reponse);
//on affiche la réponse dans la div
$("#zone_affichage").html(reponse.message);
}).fail(function (jqXHR, textStatus) {
//si l'appel ajax retourne une erreur
console.log('erreur Ajax', data, jqXHR, textStatus);
});
});
</script>
</body>
</html>
Notre script javascript va aller chercher les données à afficher via un script php : monscriptajax.php
Lors du clic sur le bouton, vous verrez le contenu de la div se remplir avec les données renvoyées par le script php.
Débuggage de l'ajax
.Pour contrôler le fonctionnement de l'ajax, il faut regarder dans la console de votre navigateur. La console de FireFox étant plus simple à utiliser pour ça, je vous recommande vivement de passer par ce navigateur pour vos tests.
La première chose à faire est d'activer, dans la console, le débuggage de l'XHR. (1)
Vous verrez alors les appels à vos scripts ajax dans la console (2)
Et, si vous en avez mis dans votre code, les affichage des console.log (3)
Dépliez la ligne de votre appel ajax (1)
Allez dans l'onglet "Requête" (2)
Regarder les variables transmises lors de votre appel ajax(3)
En allant sur l'onglet "Réponse" (1), vous pourrez voir en détails les informations retournées par votre script php (2)
Parfois, la zone (2) de réponse est "vide" (lorsque vous ne retournez pas du json ou que vous avez un message d'erreur dans votre code php.). Dans ce cas, cliquez sur le bouton "Brut" à droite pour éventuellement voir ces messages.
Par exemple, ici, à la ligne 8 de mon code php, j'ai ajouté cette ligne (fausse bien évidemment...)
$une_erreur = Ceci provoquera une erreur ...;
Mon ajax affiche donc :
Une fois que vous aurez cliquez sur "brut", vous pourrez voir le message d'erreur :