Astuce JQuery : la fonction serialize ()

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.

Sur le même sujet (en théorie ) :

• Astuce JQuery du jour : la fonction clone()
• Recherche à la Twitter avec JQuery et PHP (tutorial)
• Plugin JQuery Contactable, pour créer un formulaire de contact facilement !