Come e quando utilizzare il metodo serialize di jQuery?

Nei numerosi articoli che abbiamo scritto su jQuery, è sempre stato evidente come questo framework contribuisca a semplificare lo sviluppo del codice. In questo articolo vedremo come la conoscenza di tutti gli strumenti che ci vengono messi a disposizione possa ulteriormente renderci la vita più comoda ed il codice più elegante. Oggi analizzeremo il metodo serialize(); si tratta di uno strumento molto interessante il quale, applicato ad un form, preleva il contenuto dei campi e prepara una querystring pronta per essere inviata tramite una richiesta ajax.
Se ad esempio consideriamo un form che richiede il nome ed il cognome e lo completo con i miei dati, applicando serialize() a questo form (all’evento submit) otterrò questa stringa:

nome=Maurizio&cognome=Tarchini

Utile vero?
Ma passiamo alla pratica. Consideriamo un documento html contenente un form

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="jquery/jquery-1.4.2.js"></script>
    <title>Serialize</title>
</head>
<body>
    <form action="#"  id="input_form">
        nome: <input type="text" name="nome" /><br />
        cognome: <input type="text" name="cognome" /><br />
        email: <input type="text" name="email" /><br />
        <input type="submit" value="invia" name="submit" />
    </form>
</body>
</html>

Ora poniamo di voler inviare questi dati tramite una chiamata asincrona (se sei un po’ a digiuno di ajax, in questo articolo trovi tutto quello che c’è da sapere).
Quello che dovremo fare è prelevare il contenuto dei campi del form all’evento submit ed inviarli alla pagina di elaborazione. Il codice per fare questo potrebbe essere così (non ci starò sopra molto in quanto è tutto spiegato nei dettagli nell’articolo che ho segnalato precedentemente):

$(document).ready(function(){
    $("#input_form").submit(function(){
        var nome = $('input[name=nome]').val();
        var cognome = $('input[name=cognome]').val();
        var email = $('input[name=email]').val();
        var querystring = "nome="+nome+"&cognome="+cognome+"&email="+email;

        $.ajax({
            url: 'elaborazione.php',
            type: "POST",
            data: querystring,
            success: function(data) {
                //codice da eseguire
                    }
            });
            return false;
        });
    });

Come vedi, all’evento submit, vado a prelevare uno alla volta i dati contenuti nei campi del form.
In seguito creo la variabile querystring nel formato richiesto dal metodo ajax (nome=valore&nome=valore…).

Ora non ci interessa cosa farà il file elaborazione.php ne quello che dovrà svolgere la funzione passata nel parametro success. Quello che ci interessa invece è: Cosa succede se il nostro form ha 400 campi? Dovremo prelevare i valori dei 400 campi uno per uno e costruire una lunghissima e complicata querystring da passare al parametro data? No. Utilizzando il metodo serialize() potremo fare tutto con un’unica e semplice riga di codice.

Come utilizzare il metodo serialize?

Semplice. Invece di questo

$("#input_form").submit(function(){
    var nome = $('input[name=nome]').val();
    var cognome = $('input[name=cognome]').val();
    var email = $('input[name=email]').val();
    var querystring = "nome="+nome+"&cognome="+cognome+"&email="+email;

Basterà fare questo

$("#input_form").submit(function(){
    var querystring = $(this).serialize();

Il metodo serialize() si occuperà di leggere tutti i campi del form con id input_form (con this facciamo appunto riferimento a questo) e di creare la stringa con gli accoppiamenti nome campo – contenuto campo nel formato corretto e pronta per essere passata al parametro data del metodo ajax().
Puoi provare con questo esempio che non fa altro che stampare a video (all’evento submit) la querystring risultante dal contenuto dei campi

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="jquery/jquery-1.4.2.js"></script>
    <script type="text/javascript">
         $(document).ready(function(){
             $("#input_form").submit(function(){
                 var querystring = $(this).serialize();
                 $('#result').html(querystring);
                 return false;
                 });
        });
    </script>
    <title>Serialize</title>
</head>
<body>
    <form action="#" id="input_form">
        nome: <input type="text" name="nome" id="nome"/><br />
        cognome: <input type="text" name="cognome" id="cognome"/><br />
        email: <input type="text" name="email" id="email"/><br />
        <input type="submit" value="invia" name="submit" />
    </form>
    <p id="result"></p>
</body>
</html>

Attento, la querystring viene codificata

Una piccola nota per concludere. Se hai provato quest’ultimo script, ti sarai accorto che serialize() codifica (giustamente) i caratteri speciali. ad esempio l’email risulterà così:

nome%40sito.com

Per decodificare la stringa, PHP mette a disposizione la funzione urldecode().

echo urldecode('nome%40sito.com'); //restituisce "nome@sito.com"

Mentre nel codice mostrato precedentemente potremo agire in questo modo

$('#result').html(decodeURIComponent(querystring));

Conclusione

In questo articolo abbiamo visto un esempio di come semplificare ulteriormente lo sviluppo di codice. Se pensiamo a form molto lunghi, abbiamo visto come serialize() risolve con una sola riga di codice il problema di prelevarne il contenuto. Utilizzando questo metodo possiamo godere anche di un secondo vantaggio: L’eventuale aggiunta o rimozione di campi dal form non dovrà comportare nessuna modifica al codice jQuery, con effetti positivi sulla mantenibilità.

Tag: ,

L'autore

Maurizio è sposato con la triade PHP - MySql - Apache e, non pago, ha un'amante chiamata jQuery. Ha un blog dove cerca di descrivere nei minimi particolari sia la moglie che l'amante. La sua vera specialità è la realizzazione di gestionali complessi anche se non rifiuta mai un sito web. +

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

31 commenti

Trackback e pingback

  1. Tweets that mention Come e quando utilizzare il metodo serialize di jQuery? | Your Inspiration Web -- Topsy.com
    [...] This post was mentioned on Twitter by Antonino Scarfì and mtx_maurizio, Simone D'Amico. Simone D'Amico said: Come e quando…
  2. jQuery: Come creare delle finestre di dialogo personalizzate? (2/2) | Your Inspiration Web
    [...] Il pulsante “login” invece é un po’ più complesso. Quando viene premuto bisognerà innanzitutto leggere il contenuto dei campi.…
  3. jQuery Mobile: Il submit di un form | Your Inspiration Web
    [...] Mobile serializza i dati del [...]
  4. Flickr API: Diamo vita alla nostra applicazione | Your Inspiration Web
    [...] creare una stringa contenente tutti i valori presenti nel form (se non conosci questo metodo leggi questo articolo di…
  5. Web app in Jquery Mobile: esempio di realizzazione (seconda parte) | IMMENSO blog
    […] semplicità ricorrendo al metodo serialize() (una spiegazione su quando usare serialize è indicato qui), applicato ovviamente al nostro […]