jQuery : poster un formulaire simplement avec AJAX

Posté par seiyar81 le 18 mars 2010 | Laisser un commentaire (7)

jQuery, ce merveilleux framework qui nous permet de faire tellement de choses … Bien souvent je suis passé à côté de fonctionnalités on ne peut plus simple à utiliser mais tellement utiles.

Du genre, je dois envoyer ce formulaire avec AJAX, il contient plein de champs différents, comment faire pour que ce soit le plus simple et rapide possible ?

Tout d’abord imaginons un formulaire regroupant plusieurs champs sur toute la page.

Coordonnées


... ...

Rien de bien compliqué jusque là mais n’oubliez pas d’inclure la librairie jQuery !
On créé ensuite la page qui va traiter nos données, appelons-la post.php :

 
    <?php foreach($_POST as $key => $value) echo "
  • $key => $value
  • "; ?>

Il ne nous reste plus que la partie qui nous intéresse ici, le code javascript :

$(document).ready(function(){
	$("#formulaire").submit(function(){
		$.ajax({type:"POST", data: $(this).serialize(), url:"post.php", 
			success: function(data){
				$("#post").html(data);
			},
                        error: function(){
			        $("#post").html('Une erreur est survenue.');
			}
		});
		return false;
	});
});

Tout ce qu’on a à faire c’est ré-implémenter la fonction submit du formulaire et sérialiser ses champs avec la fonction ‘serialize()’ pour envoyer les données.
C’est tout bête mais je ne connaissais pas cette fonction et on ne développe pas toujours avec un IDE qui liste pour nous les fonctions à utiliser !
Enfin comme dit le vieil adage : RTFM !

Catégorie: Développement Web, Javascript, PHP | Laisser un commentaire (7)


7 commentaires pour “jQuery : poster un formulaire simplement avec AJAX”

Laissez un commentaire