Envoyer un formulaire en AJAX avec jQuery et JSON

Dernière mise à jour : juin 2014

Ce qui va suivre ne prétend pas être un cours et n’est donc pas exhaustif. En parcourant les forums d’entraide, j’ai remarqué qu’il y a énormément de questions autour du dialogue client <=> serveur, bien souvent on parle de Javascript et PHP.

Introduction

On va donc parler d’AJAX (Asynchronous JavaScript and XML), vous avez dû en entendre parler. C’est en quelque sorte une « technologie » proposée par les navigateurs qui permet d’envoyer des requêtes HTTP (celles-ci peuvent être synchrones ou asynchrones, ceci est très important). Ne faites pas l’erreur que je voie partout, à savoir « AJAX est un langage », c’est faux.

Si vous êtes un développeur Web, vous devez savoir ce qu’est une requête HTTP. En arrivant sur cet article, vous avez demandé à votre navigateur de faire une requête HTTP de type GET. Cette requête est synchrone, c’est-à-dire que l’on attend d’avoir une réponse complète du serveur.

Dans la majorité des cas, on souhaite utiliser AJAX afin d’apporter du confort à l’utilisateur final, éviter les rechargements complets de page alors qu’une partie doit être modifiée. C’est tout à fait normal, pourquoi faire subir au serveur des rafraîchissements en intégralité alors qu’un morceau nous conviendrait ?

Donc AJAX va nous permettre de faire des requêtes HTTP asynchrones. C’est-à-dire qu’elles ne vont pas bloquer le reste de la page et seront invisibles aux yeux de l’internaute. Ceci est faisable grâce à l’objet Javascript appelé XMLHttpRequest. Son utilisation peut paraître un peu archaïque, c’est pourquoi la librairie Javascript la plus populaire, jQuery, l’a intégré.

A noter que pour des cas très particuliers, vous pouvez être amené à utiliser AJAX pour faire des requêtes synchrones, en spécifiant le bon paramètre.

Je vais donc vous montrer l’utilisation de cet objet au travers de jQuery, c’est vraiment relativement simple à assimiler pour peu que vous ayez un minimum pratiqué en Javascript.

Cas pratique

Formulaire synchrone (sans Javascript ni AJAX)

Nous allons dans un premier temps voir comment faire un formulaire accessible sans Javascript (et sans AJAX).

Voici un formulaire classique :

<form id="monForm" action="fichier.php" method="post">
	<label for="pseudo">Pseudo</label>
	<input type="text" id="pseudo" name="pseudo" />

	<label for="mail">Email</label>
	<input type="email" id="mail" name="mail" />

	<input type="submit" id="envoyer" value="Envoyer" />
</form>
<?php
if(isset($_POST['pseudo']) && isset($_POST['mail'])) {
	if(($_POST['pseudo'] !== '') && ($_POST['mail'] !== '')) {
		$reponse = 'ok';
	} else {
		$reponse = 'Les champs sont vides';
	}
} else {
	$reponse = 'Tous les champs ne sont pas parvenus';
}

echo $reponse;
?>

Ici on vérifie que les variables transmises sont celles attendues et qu’elles ne sont pas vides.
On assigne un message dans $reponse qui est affiché à la fin. Rien d’extraordinaire me direz-vous.

Formulaire asynchrone (avec AJAX et donc Javascript)

En ajoutant jQuery à votre page et ce code on peut aussi recevoir ce résultat en AJAX, et donc sans rechargement de page. Plus agréable pour l’internaute, non ? En faisant les bons contrôles côté client, vous soulagez aussi le serveur d’un travail dont il pourrait se passer dans la majorité des cas (je rappelle qu’il faut toujours faire les vérifications côté serveur afin d’éviter des attaques).

$(document).ready(function() {
	// Lorsque je soumets le formulaire
	$('#monForm').on('submit', function(e) {
        e.preventDefault(); // J'empêche le comportement par défaut du navigateur, c-à-d de soumettre le formulaire

		var $this = $(this); // L'objet jQuery du formulaire

		// Je récupère les valeurs
		var pseudo = $('#pseudo').val();
		var mail = $('#mail').val();

		// Je vérifie une première fois pour ne pas lancer la requête HTTP
		// si je sais que mon PHP renverra une erreur
		if(pseudo === '' || mail === '') {
			alert('Les champs doivent êtres remplis');
		} else {
			// Envoi de la requête HTTP en mode asynchrone
			$.ajax({
				url: $this.attr('action'), // Le nom du fichier indiqué dans le formulaire
				type: $this.attr('method'), // La méthode indiquée dans le formulaire (get ou post)
				data: $this.serialize(), // Je sérialise les données (j'envoie toutes les valeurs présentes dans le formulaire)
				success: function(html) { // Je récupère la réponse du fichier PHP
					alert(html); // J'affiche cette réponse
				}
			});
		}
	});
});

Tout navigateur moderne possède des outils de développement comme le Chrome Dev Tools de Chrome. Souvent avec la touche F12 sur Windows. Ici : Network > XHR > et on clique sur la ligne (une ligne = une requête). Au passage, « XHR » c’est pour « XMLHttpRequest », une autre façon de mentionner « AJAX » du coup. ;)

Inspection de la requête dans Chrome Dev Tools

Inspection de la requête dans Chrome Dev Tools

Dans « Form Data » on peut voir qu’il envoie bien toutes les données du formulaire, en gras la clé, représentée dans le HTML par l’attribut « name » et en face la valeur représentée dans le HTML par l’attribut « value ». Ainsi, côté PHP nous recevons $_POST['pseudo'] et $_POST['mail'].

Et si je souhaite que mon PHP renvoie plusieurs informations, dans un tableau par exemple ?

C’est là que JSON intervient ! Ce n’est rien d’autre qu’un objet Javascript. Pour dire que l’on souhaite récupérer un objet JSON, il faut l’indiquer dans l’appel AJAX et faire les modifications côté PHP.

<?php
if(isset($_POST['pseudo']) && isset($_POST['mail'])) {
	if(($_POST['pseudo'] !== '') && ($_POST['mail'] !== '')) {
		$reponse = 'ok';
	} else {
		$reponse = 'Les champs sont vides';
	}
} else {
	$reponse = 'Tous les champs ne sont pas parvenus';
}

echo json_encode(['reponse' => $reponse]);
?>

La fonction json_encode() convertit un tableau PHP en un objet JSON que pourra lire Javascript.

Réponse renvoyée par le serveur, ici un objet "reponse"

Réponse renvoyée par le serveur, ici un objet « reponse »

Notre code jQuery pourra ressembler à (désolé pour la coloration syntaxique foireuse, le code est correct) :

$(document).ready(function() {
	$('#monForm').on('submit', function(e) {
        e.preventDefault(); // J'empêche le comportement par défaut du navigateur, c-à-d de soumettre le formulaire

		var $this = $(this);

		var pseudo = $('#pseudo').val();
		var mail = $('#mail').val();

		if(pseudo === '' || mail === '') {
			alert('Les champs doivent êtres remplis');
		} else {
			$.ajax({
				url: $this.attr('action'),
				type: $this.attr('method'),
				data: $this.serialize(),
				dataType: 'json', // JSON
				success: function(json) {
					if(json.reponse === 'ok') {
						alert('Tout est bon');
					} else {
						alert('Erreur : '+ json.reponse);
					}
				}
			});
		}
	});
});

On rajoute la propriété dataType, elle peut également servir pour récupérer un XML. Ensuite on affiche l’élément « reponse » de l’objet JSON. Il faut bien sûr se baser sur le code PHP car c’est lui qui construit le tableau.
Si vous avez besoin de parcourir un JSON alors vous pouvez utiliser $.each().

Pour faire de l’AJAX en jQuery on peut aussi utiliser les méthodes raccourcies (aliases) comme $.get(), $.post() et $.getJSON(). Personnellement je ne préfère pas car c’est moins facile à lire/débuguer/maintenir.

Démonstration

Rendez-vous sur la page de démonstration, le code utilisé n’est pas exactement le même, j’ai fait un effort de mise en page.

J’espère que vous avez eu des réponses à vos questions en lisant cet article, au plaisir de vous revoir sur mon blog.

Vous aimerez aussi...