PHP/Jquery - Débugage AJAX

jordane45 Messages postés 38273 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 6 novembre 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

<?php
//monscriptajax.php
// fichier appellé par mon code ajax jquery

//on récupère l'id envoyé par l'appel ajax (en méthode "POST")
$id = !empty($_POST['id']) ? $_POST['id'] : NULL;

$result['status'] = "success";
$result['message'] = "<div> Ajax OK....   id=".$id."</span>";

echo json_encode($result);
exit;

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 :

Discussions similaires

écrire un rapport de travail

Exemple de base de données access