Un système de commentaire avec jQuery en Ajax (2)

Publié dans Javascript | Marqué avec , , ,
Share

Hier, j’expliquais comment faire un système de commentaire avec jQuery, c’est-à-dire un système de commentaires sans rechargement de la page. Mais il manquait encore l’appel Ajax, j’entends par là, l’appel asynchrone à un script PHP qui enregistre le commentaire ajouté dans une base de données. C’est aujourd’hui chose faites ! J’en profite pour expliquer les différents tests que j’ai effectué avec getJSON et post en mode JSON et XML.

Première étape : getJSON

Je rappelle l’idée de ce script : un utilisateur peut remplir un formulaire pseudo+commentaire et lorsqu’il l’envoie, hop son message apparait sans rechargement de la page en tête des autres commentaires. Son commentaire a été enregistré dans une base de données entre temps. Du coup :

  • on a besoin d’envoyer 2 données au script PHP : le pseudo et le contenu du commentaire
  • on a besoin que le script PHP nous renvoie 3 données : le pseudo et le contenu du commentaire (qu’on a sécurisé et affiné si besoin) et une valeur de retour (1 si ok, 0 si problème)

Et la, si vous êtes que moi et que vous ne connaissez pas JSON, vous avez le droit de vous demander quoi faire.

En effet, dans un précédent billet Utiliser une fonction PHP avec jQuery et get(), j’expliquais le fonctionnement de get(), mais on voit bien qu’on ne peut récupérer 3 variables avec cette méhode ! Mais comme d’hab, la doc jQuery est là pour nous sauver et nous présente : getJSON ! Cette méthode nous permet de faire un appel asynchrone à PHP, ce dernier nous renvoie un fichier au format JSON(exemple ci-dessous), que l’on interprète ensuite facilement en jQuery pour récupérer les variables désirées.

{ "var1": "data1", "var2": "data2", "var3": "data3" }

Voici donc ce que donne le script jQuery (j’ai repris la version simple d’hier pour commencer) :

$(document).ready(function() {
	// Au submit du formulaire
	$('#form').submit( function() {
		var pseudo = $('#pseudo').val();
		var commentaire = $('#contenu').val();
		if (pseudo != '' && commentaire != '') {
			// On fait l'appel Ajax
			$.getJSON('include/ajax/commentaire.php', {pseudo:pseudo, commentaire:commentaire}, function(data){
				if (data.ret) {
					// On ajoute le nouvel élément
					$('#commentaire').prepend('<p class="last"><strong>'+data.pseudo+'</strong> a dit :<br />'+data.commentaire+'</p>');
				}
				else {
					$('#contenu').after('<span class="erreur">Erreur lors de l\'ajout du commentaire</span>');
					$('.ok').hide().fadeIn('slow');
				}
			 });
		}
		// On retourne false pour ne pas recharger la page
		return false;
	}); });

On peut voir que l’on fournit le contenu des champs pseudo et commentaire au script PHP, on les récupérera à l’aide de $_GET['nomVariable']. Quant aux variables que nous renvoi PHP, on les récupère avec data.nomVariable. Bref, le fonctionnement est vraiment simple ! Le fichier commentaire.php correspondant est :

if (isset($_GET['pseudo']) && isset($_GET['commentaire'])) {
	echo '{
		"ret" : 1,
		"pseudo" : "'.$_GET['pseudo'].'",
		"commentaire" : "'.nl2br($_GET['commentaire']).'"
	}';
}
else {
	echo '{"ret" : 0}';
}

Deuxième étape : post en XML

Le script ci-dessus fonctionne très bien tant que l’on écrit par des scripts sur plusieurs lignes. En effet, si ce n’est pas le cas, on ne respecte plus le format JSON que l’on renvoie en PHP, donc on ne renvoit pas du JSON, donc ça bug. Moralité, au lieu de renvoyer du JSON, on va renvoyer du XML ! Et pour cela, il faut utiliser la méthode post() ! (à noter qu’on pourrait également l’utiliser en mode JSON, et dans ce cas là, le code est sensiblement le même que précédemment)

$(document).ready(function() {
	// Au submit du formulaire
	$('#form').submit( function() {
		var pseudo = $('#pseudo').val();
		var commentaire = $('#contenu').val();
		// On supprime les anciens messages d'erreurs ou de succès
		$('.erreur').remove();
		$('.ok').remove();
		// Si on a commentaire à ajouter
		if (pseudo != '' && commentaire != '') {
			// On affiche le loader
			$('#contenu').after('<img src="<?php echo DEFAULT_THEME_PATH; ?>/img/loader.gif" alt="Chargement..." class="loader" />');
			// On compte le nombre de commentaire déjà présent + celui qui va être créé
			var nbCom=1;
			$('#commentaire p').each(function() { nbCom++; });
			// On enlève la class "last" à l'ancien dernier
			$('.last').removeClass('last');
			// On fait l'appel Ajax
			$.post('include/ajax/commentaire.php', {pseudo:pseudo, commentaire:commentaire}, function(data){
				var xmlData = data.getElementsByTagName('com')[0];
				var ret = xmlData.getElementsByTagName('ret')[0].firstChild.nodeValue;
				var xmlPseudo = xmlData.getElementsByTagName('pseudo')[0].firstChild.nodeValue;
				var xmlCommentaire = xmlData.getElementsByTagName('commentaire')[0].firstChild.nodeValue;
				if (ret) {
					// On ajoute le nouvel élément
						$('#commentaire').prepend('<p class="last" id="com_'+nbCom+'"><strong>'+xmlPseudo+'</strong> a dit :<br />'+xmlCommentaire+'</p>');
						// On le met pair ou impair
						if ($('.last').next().is('.pair'))
							$('.last').addClass('impair');
						else
							$('.last').addClass('pair');
						if (!$('.last').next().is('p'))
							$('.last').addClass('first');
						// On efface le contenu du formulaire
						$('#contenu').val('').focus();
						$('.loader').remove();
						$('#contenu').after('<span class="ok">Commentaire ajouté avec succès</span>');
						$('.ok').hide().fadeIn('slow');
				   }
				   else {
					   $('.loader').remove();
						$('#contenu').after('<span class="erreur">Erreur lors de l\'ajout du commentaire</span>');
						$('.ok').hide().fadeIn('slow');
				   }
			 }, 'xml');
		}
		else {
			if (pseudo == '')
				$('#pseudo').after('<span class="erreur">Champ requis</span>');
			if (commentaire == '')
				$('#contenu').after('<span class="erreur">Champ requis</span>');
			$('.erreur').hide().fadeIn('slow');
		}
		// On retourne false pour ne pas recharger la page
		return false;
	}); });

Comme vous pouvez le voir, il faut s’amuser un petit peu pour récupérer la variable que l’on souhaite. Avec mes connaissances actuelles, je ne vois pas comment faire autrement en jQuery pour récupérer du XML. Le script PHP correspondant est :

header("Content-Type: text/xml");
echo "<?xml version='1.0' encoding='UTF-8' ?>";
if (isset($_POST['pseudo']) && isset($_POST['commentaire'])) {
	echo '<com>
		<ret>1</ret>
		<pseudo>'.$_POST['pseudo'].'</pseudo>
		<commentaire><![CDATA['.nl2br(htmlspecialchars($_POST['commentaire'], ENT_QUOTES, 'UTF-8')).']]></commentaire>
	</com>';
}
else {
	echo '<com>
		<ret>0</ret>
		<pseudo>no</pseudo>
		<commentaire>no no</commentaire>
	</com>';
}

Cette fois-ci, il a fallu préciser que le fichier généré est un fichier XML. Il faut aussi remarquer que j’ai entourer le commentaire de la balise @@@@, afin d’obtenir un document XML valide si jamais il y a des balises HTML. Seul le contenu de cette balise est renvoyé par text(), elle n’apparait donc pas dans le code HTML !

Dernière étape : le test

Et voilà un petit script bien fini ! Reste à créer le fichier CSS qui va bien, mais ça, ce sera pour une prochaine fois.

Tester ce code

24 réponses à Un système de commentaire avec jQuery en Ajax (2)

  1. Jb

    Excellent billet ! 🙂

  2. Merci ! Faudrait que j’écrive un billet sur la version minitchat !

  3. Jb

    Voui !
    Ah et juste un truc que j’ai vu, mais c’est du détail. Dans la partie PHP qui permet de transférer le JSON, pour ma part je préfère que le JSON reste plutôt transparent dans le code. Donc je mets les données d’abord sous forme de tableau associatif PHP, et après je fais un « echo json_encode($monTableauDeDonnées) ». Je trouve ca plus beau meme si ca change rien, et ca évite les petites erreurs quand t’écris le json à la main si tu commences à avoir un json un peu massif. Vala

    Bye ! et Vive les BNs !

  4. Merci de l’astuce ! Je ne savais pas qu’on pouvait faire ça.

  5. xavier

    salut

  6. simo

    Il faut ajouter un petit lien pour télécharger le script (exemple)c’est très important
    Par exemple ce exemple est bien fait mais il y a d’autres site ou je peux le télécharger et mettre dans mon bureau dans une minute
    Merci

  7. C’est pas une bête idée. Merci du conseil ! Je tâcherai de faire ça à l’occasion, et pour les prochains billets.

  8. kimoree@hotmail.com

    bien ^^

  9. Merci pour l’article c’est exactement ce que je cherchais !

  10. C’est trésinteressant, Merci pour tout

  11. YesYes

    Merci c’est très intéressant !!!

  12. Ping : Un système de commentaires avec jQuery (1) - 30 minutes par jour

  13. Ping : Utiliser une fonction PHP avec jQuery get - 30 minutes par jour

  14. gruk

    Pour faire plus propre, il faut tant que possible éviter de mélanger l’HTML et le code JS.
    L’HTML, c’est l’affichage, et le JS, c’est la manipulation du DOM.

    Donc les codes comme $(‘#contenu’).after(‘<img src="<
    mélangent les genres (il faut instancier un objet image, pas l'affecter en tant que texte, même si ça fonctionne).

  15. GeekDsr

    cool cool

  16. Thank you it’s very interesting 🙂

  17. sabanca

    coool dommage pas de captcha

  18. adlinio

    je comprends pas très bien

  19. je voulais savoir est ce qu’on peut teste sans utiliser une base de donne ou la base de donner est obligatoire merci

    • Oui bien sûr. D’ailleurs mes bouts de code n’utilisent pas de base de données.

  20. paolo

    merci pour ce script … seriez vous m’indiquez comment insérer les infos dans la base de donnée ? je suis débutant … mais je m’accroche 🙂

  21. rosa

    svp la base d donnée?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*