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.

Pas encore de billet sur le même sujet !

Cette entrée a été publiée dans JQuery, avec comme mot(s)-clef(s) , , . Vous pouvez la mettre en favoris avec ce permalien.

11 reponses a Astuce JQuery : la fonction serialize ()

  1. Stephane dit :

    Merci, c’est toujours intéressant de découvrir de nouvelles fonctionnalités dans jQuery.

  2. de Fontenay dit :

    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

  3. Isoman3 dit :

    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

  4. de Fontenay dit :

    @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

  5. christian dit :

    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

  6. loic dit :

    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…

  7. loic dit :

    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
    ++

  8. Emeric dit :

    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);
    }
    });
    });

  9. tomP dit :

    Bonjour.

    D’abord, merci pour cette petite explication qui m’a bien dépannée.
    Je bloque quand même sur un détail.
    J’ai essayer de concaténer le résultat du serialize avec un autre paramètre qui ne fais pas partit de mon form et ça ne fonctionne pas. Y-a-t il une solution ? Merci

  10. JJLEC0Z dit :

    On peut même aller plus loin dans la fonction générique, un exemple pris dans le index.php de cette archive :

    $(".myForm").submit(function(e)
            {
                    e.preventDefault();
                    
                    var myForm = $(this);
            
                    $.ajax({
                            type            : myForm.attr("method"),
                            url                     : myForm.attr("action"),
                            data            : myForm.serialize(),
                            beforeSend      : function()
                            {
                                    $("html").css("cursor","wait");
                                    $(".resultAjax_html, .resultAjax_code, .resultAjax_plain").show();
                                    
                            },
                            complete        : function()
                            {
                                    $("html").css("cursor","auto");
                                    
                            },
                            error           : function()
                            {
                                    $(".resultAjax_html").html("Error loading!");
                            },
                            success         : function(output)
                            {
                                    $(".resultAjax_html").html(output);
                            }
                    });
            });
    
    
    

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">