Bonjour,
Ce qui va suivre ne prétend pas être un cours et n’est donc pas exhaustif. J’ai remarqué que beaucoup de monde avait du mal à comprendre le fonctionnement de l’AJAX qui n’est autre qu’une requête HTTP en asynchrone.
Il est bien connu que jQuery facilite le développement côté client, l’AJAX intervenant à la fois chez le client et le serveur, ce dernier n’échappe pas au succès.
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.
Avec un petit code jQuery on peut aussi bien recevoir ce résultat en AJAX, et donc sans rechargement de page.
$(document).ready(function() {
// lorsque je soumets le formulaire
$('#monForm').on('submit', function() {
// 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 {
// appel Ajax
$.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 (voir plus loin), ici les $_POST
success: function(html) { // je récupère la réponse du fichier PHP
alert(html); // j'affiche cette réponse
}
});
}
return false; // j'empêche le navigateur de soumettre lui-même le formulaire
});
});
Avec mes commentaires cela devrait être clair, pour la sérialisation (ligne 18), il faut voir ce que fait jQuery, pour cela j’utilise Firefox et l’extension Firebug, je soumets le formulaire puis je regarde ce qu’il se passe dans « Réseau », « XHR » et « Post » :
Il faut regarder en dessous de « Source », il va chercher les éléments du formulaire et plus précisément les attributs name et value, ensuite il utilise cette syntaxe : name=value et sépare donc chaque élément avec un &.
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 minuscules 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';
}
$array['reponse'] = $reponse;
echo json_encode($array);
?>
La fonction json_encode() convertit un tableau PHP en un objet JSON que pourra lire Javascript.
Notre code jQuery pourra ressembler à :
$(document).ready(function() {
$('#monForm').on('submit', function() {
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',
success: function(json) {
if(json.reponse == 'ok') {
alert('Tout est bon');
} else {
alert('Erreur : '+ json.reponse);
}
}
});
}
return false;
});
});
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.
A bientôt ! :)
Loading ...
Créer une application avec Flex 4
Insérer des données d’un fichier Excel ou Access dans MySQL
5 commentaires
1 ping
Charly
11 mai 2012 à 09:18 (UTC 1) Lier vers ce commentaire
Merci pour ce tuto, il y en a beaucoup sur le net mais peu expliquent comment faire communiquer php et jquery efficacement.
Maxime
24 mai 2012 à 14:45 (UTC 1) Lier vers ce commentaire
Merci beaucoup pour cette explication.
Mais comment faire pour venir lire séparément les toutes données dans json.reponse?
Je pense utilisé JSON.parse, mais à l’heure actuelle, je n’y arrive pas.
Syl
24 mai 2012 à 14:57 (UTC 1) Lier vers ce commentaire
Si tu veux lire un JSON et que tu ne sais à l’avance combien tu as de lignes il faut boucler dessus de cette manière :
success: function(json) {$.each(json, function(i, item) {
alert(i + ' => ' + item);
});
}
Maxime
24 mai 2012 à 15:14 (UTC 1) Lier vers ce commentaire
Merci, il y a t’il moyen de récupérer variable par variable, plutôt que caractère par caractère?
Tundteene
30 mai 2012 à 01:53 (UTC 1) Lier vers ce commentaire
tres interessant, merci
jQuery, remplir une liste déroulante selon une autre liste » chez Syl
9 février 2012 à 18:23 (UTC 1) Lier vers ce commentaire
[...] Nous allons voir comment réaliser ceci avec jQuery en passant par des appels ajax. Si vous n’êtes pas familier avec l’Ajax et jQuery (et même le format JSON) vous pouvez tout d’abord lire mon article « Envoyer un formulaire en Ajax avec jQuery et JSON ». [...]