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" "http://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" "http://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à.
L'autore
31 commenti
Trackback e pingback
-
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… -
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.… -
jQuery Mobile: Il submit di un form | Your Inspiration Web
[...] Mobile serializza i dati del [...] -
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… -
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 […]
Ciao, un piccolo appunto: nel markup del form, i vari “nome”, “cognome” e “email” dovrebbero essere inseriti in un tag
Nei commenti non mi ha inserito “”
niente…il codice compreso tra le parentesi angolari viene semplicmente cancellato e il mio messaggio risulta inutile…vi consiglio di vere questo piccolo bug e di sistemare i miei commenti…in ogni caso il tag è “label” tra parentesi angolari.
Grazie Massimiliano.
Hai perfettamente ragione.
Sono abiutato, quando spiego qualcosa, a concentrarmi su quell’argomento ed a vedere il resto come un contorno.
In questo caso focalizzando tutto sul codice jQuery prestando poca attenzione al resto.
Approccio discutibile che mi é già stato fatto notare.
Migliorerò :-)
Bell’articolo Maurizio,
al serialize() io aggiungerei j.URLencode() così riesci a passare anche le lettere accentate.
Ciao Luca.
jQuery codifica già le stringhe che serializza comprese le lettere accentate.
:-)
Grandissimo tutorial, complimenti, io uso molto la chiamata ajax per i form soprattutto nelle applicazioni web che creo, non conoscevo serialize, forse la fretta, la distrazione, non mi sono mai soffermato su questa funzione che mi avrebbe semplificato la vita, non è mai troppo tardi, grazie Maurizio
Nonostante utilizzi sovente ajax (con jQuery) non conoscevo questo metodo!
Velocizza di molto lo sviluppo!
Grande Maurizio!
@nicola & Ixn
Quello che dicevo all’inizio dell’articolo era proprio questo. Non solo jQuery semplifica la vita; ma conoscere in modo approfondito jQuery la semplifica ulteriormente.
L’anno scorso per velocizzarmi lo sviluppo mi ero scritto un plugin che ciclava ogni possibile campo… in futuro ne faro certamente a meno :D
Vuoi dire che ti sei sviluppato un metodo serialize-like? :-)
Esatto, usavo .each() per prendere ogni input ed aggiungerlo alla variabile querystring.
Se non altro fu istruttivo, ma credo che dalla prossima volta farò prima e meglio.
Molto utile, grazie mille!
Grazie dell’apprezzamento Giuseppe
Non lo conoscevo neanche io, molto bello e sopratutto molto utile… me lo segno per il prossimo form ;-)
Che ne dici, dovrei fare la rubrica:
“tutte quelle cose che se avessi saputo prima avrei risparmiato 5000 ore” :-)
Secondo me si :P sono quelle “piccole” cose che vieni sempre a sapere DOPO aver girato mezzo web alla ricerca di una soluzione… e nel 90% dei casi, la soluzione era semplicissima e a portata di mano. Ma non si può conoscere tutto, purtroppo :-)
Volevo segnalare che il .serialize() funziona anche con i div basta inserire questo $(‘#div *’).serialize().
CIao
sì, grazie per la segnalazione Luca
Vorrei anche ricordarvi che le funzioni ajax di jQuery accettano anche oggetti, quindi a data si può anche passare:
{
nome:$(“#nome”).value(),
cognome:$(“#cognome”).value()
}
Ovviamente per i form è preferibile usare serialize, ma se dovete passare qualsiasi altro valore, usare gli oggetti è molto meglio che costruire una stringa con 10 variabili
Grazie per la segnalazione bfred :-)
Ottima funzione!
se volessi effettuare un controllo dell’input prima di formare la querystring cambia qualcosa?
Dovrei estrapolare comunque tutti i dati di miei interesse per verificarne la correttezza giusto?
dovrebbe funzionare se prima controllo i miei dati e se corretti formo la qs con serialize e la invio?
grazie mille!
Con .serialize() non fai un controllo sulla correttezza dei campi.
Se ad esempio hai dei campi obbligatori, prima di fare la chiamata ajax devi verificare che questi siano compilati.
Io in genere faccio cosi:
function sendForm()
{
// Istanzio una variabile che mi indica se è tutto ok
var valid = TRUE;
// Es. il nome è obbligatorio (inoltre è sempre meglio fare un trim)
if ($(“#input_nome”).val() == “”)
{
alert (“Nome obbligatorio”);
valid = FALSE;
}
if (valid == TRUE)
{
querystring = $(“#mio_form”).serialize();
//…. CHIAMATA AJAX….
}
}
Ciao Maurizio vorrei chiederti come fare a reindirizzare dal file .php, dove passo i dati del form, ad un altra pagina di tipo jquery mobile.
Ho provato con header location ma senza successo! Mi sapresti dare delle dritte? Grazie mille in anticipo
Ciao, bell’articolo.
Non ho capito però se è obbligatorio passare la querystring ad ajax per eseguire il submit.
Cioè, se ho un form con il tasto tipo “submit” e in javascript eseguo $(‘#mia-form’).serialize() quando premo il tasto submit non mi pulisce la querystring se è vuota.
Come si fa a passare campi input type=”file”? Non credo che serialize() operi su tali dati. Non riesco a trovare suggerimenti validi. Puoi aiutarmi?