Après le précédent billet présentant la fonction clone de JQuery, j’ai décidé de te parler d’une autre fonction méconnue de JQuery : la fonction serialize.
Alors que fait-elle cette fonction ?
Pour appeler serialize, il faut avoir en sélecteur un formulaire. Serialize va tout simplement retourner une chaine de caractères contenant toutes les valeurs des champs de ce formulaire. La chaine est formatée pour être envoyée en Ajax par la suite ( de type champ1=valeur1&champ2=valeur2&champ3=valeur3… ). La où la fonction serialize va être utile, c’est qu’elle permet de créer une fonction qui va permettre d’envoyer n’importe quel formulaire en Ajax avec une seule fonction.
Comme d’habitude, la demo est par là :
demo de la fonction serialize
Admettons que l’on ajoute la classe « ajax » à tous les formulaires que l’on souhaite envoyer en Ajax :
<form class="ajax" action="data.php" method="post"> <p> <label for="nom">Nom :</label> <input type="text" name="nom" id="nom" /> </p> <p> <label for="email">Email :</label> <input type="text" name="email" id="email" /> </p> <p> <input type="hidden" name="typeform" value="inscription" /> <input type="submit" value="inscription" /> </p> </form>
Ici, j’ai créé un formulaire d’inscription simple demandant seulement un nom et un email. Un champ caché (nommé typeform) va permettre de différencier le formulaire des autres pour le traitement en PHP (en assumant que tous les traitements en Ajax se passe dans le même fichier).
Le JQuery va être ici très simple (en connaissant les bases de JQuery 
) :
$('form.ajax').submit( function(e) { e.preventDefault(); // on empeche l'envoi du formulaire par le navigateur var datas = $(this).serialize(); $.ajax({ type: 'POST', // envoi des données en POST url: $(this).attr('action'), // envoi au fichier défini dans l'attribut action data: datas, // sélection des champs à envoyer success: function(msg) { // callback en cas de succès alert('success : '+datas); } }); });
C’était simple non ? La fonction serialize de JQuery est toute simple, mais super utile ! Elle permet vraiment de factoriser le code.
Pas encore de billet sur le même sujet !
Merci, c’est toujours intéressant de découvrir de nouvelles fonctionnalités dans jQuery.
Bonjour,
Merci beaucoup pour ce tutoriel, la fonction serialsize fonctionne avec les input de type file?
J’ai essayé et ca ne semble pas fonctionné…
Ca marche de votre côté?
Merci d’avance et bonne continuation
bonjour,
@Fontenay j’ai un problème avec les input de type file sur la fonctionnalités $.ajax() de jquery. STP tu peut de dire si tu la déjà fait et comment. merci
@Isoman3 en effet j’ai trouvé la solution à mon problème. L’upload n’est pas géré par javascript et l’ajax d’ou ton problème. Cependant il existe une solution en passant par une frame, voici un tuto qui pourrai t’aider : http://blogs.codes-sources.com/cyril/archive/2007/03/24/ajax-et-upload-part-1.aspx
bonjour,
mois j’ai un problème.
en fait j’ai un projet dans lequel je dois transférer les fichiers via un réseau local.
lorsqu’un utilisateur recoit un fichier, une info-bulle doit le lui signaler, et c’est là le problème.
je rafraichie la liste des messages avec ajax (div…)
mais je ne sais vraiment pas comment réaliser l’info bulle veuillez m’aider s’il vous plait de préférence par mail.
merci d’avance
Bonjour,
une petite question, sur quoi se base la fonction pour convertir certains caractères en %xx lors de la sérialisation ?
Cela parait invisible au serveur étant donné que les données récupérées dans les tableaux $_POST ou $_GET sont à nouveau reconvertit.
Ainsi si on sérialise la chaine &é »‘(-è_çà)=^$mù*,;:!?./§%µ¨£+°0987654321²~#{[|`\^@]}
on obtient %26%C3%A9%22′(-%C3%A8_%C3%A7%C3%A0)%3D%5E%24m%C3%B9*%2C%3B%3A!%3F.%2F%C2%A7%25%C2%B5%C2%A8%C2%A3%2B%C2%B00987654321%C2%B2~%23%7B%5B%7C%60%5C%5E%40%5D%7D
Et on constate que certains sont transformé pas d’autres, pt conformément à une RFC ???
Merci d’avance pour tout éclaircissement…
Je viens de trouver la réponse :
c’est apparemment le mécanisme html url encoding : http://www.w3schools.com/tags/ref_urlencode.asp
Et pour info en php, la fonction « string urlencode ( string $str ) » fait le même traitement.
Bonne journée
++
bonjour,
comment lorsque click sur mon button valider, ajax m’amène vers ma page.php avec les paramètre datas en $_POST ???
$(‘form.ajax’).submit( function(e) {
e.preventDefault(); // on empeche l’envoi du formulaire par le navigateur
var datas = $(this).serialize();
$.ajax({
type: ‘POST’, // envoi des données en POST
url: $(this).attr(‘action’), // envoi au fichier défini dans l’attribut action
data: datas, // sélection des champs à envoyer
success: function(msg) { // callback en cas de succès
alert(‘success : ‘+datas);
}
});
});