11492 sujets

JavaScript, DOM et API Web HTML5

[Ajax/Jquery/PHP] Requête Ajax de type POST

Bonsoir à tous,

Voici la question du jour :
Je ne trouve malheureusement pas de tutoriel capable de m'expliquer comment faire une requête Ajax avec Jquery. En fait ce ne sont pas les tutos qui ne sont pas capables, c'est surtout moi qui comprend pas grand chose pour le moment.

Voilà mon code :
<?php
	if (isset($_POST['sendRequest']) && !empty($_POST['name'])) {
		$success = 'Your name is '.$_POST['name'].'.';
	} else { $error = 'Please enter your name.'; }
?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Ajax</title>
	<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
	<script type="text/javascript">
		$.ajax({
			type: "POST",
			url: "index.php",
			success: function() { alert('Success'); },
			error: function() { alert('Error'); }
		});
	</script>
</head>

<body>

	<form method="post" action="index.php">	
		<label>Name :</label>
		<input type="text" name="name" />
		<input type="submit" name="sendRequest" value="Send Request" />
	</form>
	
	<?php
		echo $error;
		echo $success;
	?>
	
</body>
</html>


Plusieurs questions :
- Quand on fait une requête Ajax, faut il laisser action="index.php" dans la balise form ?
- Quand ma requête Ajax fonctionnera, va telle me retourner mes erreurs PHP $error / $success ou alors faut il en paramétrer d'autres avec jQuery ?
- Pour l'instant ma requête fonctionne puisqu'elle me renvoie alert('Success'); mais la page se recharge donc visiblement il y a un problème quelque part, non ?

Merci d'avance pour vos réponses.
Modifié par Remay (12 Jun 2009 - 23:01)
Remay a écrit :
- Quand on fait une requête Ajax, faut il laisser action="index.php" dans la balise form ?

Tu fais ta requête via JavaScript. La présente ou non d'un FORM dans la page n'a strictement aucune conséquence... à moins que tu ne récupères les informations du formulaire pour faire ta requête, mais dans ton exemple ce n'est pas le cas.

Remay a écrit :
- Quand ma requête Ajax fonctionnera, va telle me retourner mes erreurs PHP $error / $success ou alors faut il en paramétrer d'autres avec jQuery ?

Vu que c'est une requête en POST... à priori elle ne retourne strictement rien. jQuery se contente d'exécuter success ou error en fonction de la situation.

Remay a écrit :
- Pour l'instant ma requête fonctionne puisqu'elle me renvoie alert('Success'); mais la page se recharge donc visiblement il y a un problème quelque part, non ?

La page se recharge lorsque tu soumet le formulaire? Auquel cas c'est normal, la soumission de ton formulaire ne se fait pas via Ajax mais de manière classique. Tu n'interceptes pas l'évènement de soumission du formulaire pour y substituer une requête Ajax. Donc ta page se recharge, et directement tu te retrouves avec une requête Ajax en POST (exécutée au moment où l'élément SCRIPT est analysé), sans données (?). Mouais, je suis un peu perdu là. Mais le code jQuery que montre ton exemple est dans tous les cas largement insuffisant: tu ne gères aucun évènement, et tu ne soumets pas de données en poste via la fonction Ajax (option data manquante).

Quant à savoir comment récupérer un message généré par le script PHP, c'est détaillé dans la documentation de jQuery: http://docs.jquery.com/Ajax/jQuery.ajax (onglet Options, description de l'option success). Attention: tu peux avoir un succès de la fonction Ajax qui retourne un contenu PHP qui dit «Ah ben non, j'ai pas enregistré vos données car elles sont mal formatées» par exemple. Côté logique serveur, ça sera un échec. En ce qui concerne la fonction Ajax, ça sera un succès (la requête a obtenu une réponse HTTP 200). Il faut donc récupérer le message d'erreur généré par le script PHP, et éventuellement le parser pour savoir si, côté serveur, ça a marché ou non, et prendre les mesures adéquates.
Sujet clos
Aller à