Uso di jQuery Serialize: passare dati di un form via ajax

Oggi vediamo un metodo alternativo per poter passare facilmente e con il minimo sforzo delle variabili tramite jQuery ajax in modo facile e veloce.

[lightgrey_box] Attenzione! per comprendere appieno il contenuto di questo articolo ti invitiamo a leggere questa introduzione. Buona lettura! [/lightgrey_box]

Iniziare con jQuery ajax può risultare molto ostico all’inizio sopratutto se non avete basi di programmazione. Avevamo parlato tempo fa di un ottimo metodo per passare i dati di un form a un file di elaborazione php per elaborare i dati.

Oggi vediamo come “semplificare” la precedente soluzione, evitando di dover associare a ciascun elemento un id e un val() e rendendo tutto molto più snello e veloce.

Introduzione a jQuery serialize()

jQuery serialize() è una funzione nativa di jQuery che ci permette di recuperare i valori presenti in un form e di poterli usare tramite ajax per passarli a un file di elaborazione PHP. La peculiarità fantastica è che basta selezionare l’id del form per farsi recuperare automaticamente tutti gli id e la stringa da inviare tramite ajax. Vediamo il dettaglio.

Form HTML e Script jQuery

Per prima cosa componiamo il nostro form di gestione dati:

<form id="add-elemento" action="#">
<input id="testo" type="text" name="testo" />
<input id="testo2" type="text" name="testo2" />
<input id="bottone" type="button" value="Invia i dati" />
</form>

A questo punto creiamo il motore di invio dati grazie all’uso di serialize().

$("#bottone").click(function(){

var dati = $("#add-elemento").serialize(); //recupera tutti i valori del form automaticamente

//form invio dati post ajax

//questo alert potete levarlo, serve solo per farvi capire come vengono passati i dati
alert(dati);

//invio
$.ajax({
type: "POST",
url: "classes/add.php",
data: dati,
dataType: "html",
success: function(msg)
{
$("#risultato").html(msg);

},
error: function()
{
alert("Chiamata fallita, si prega di riprovare...");
}

});//ajax

});//bottone click

Come avrete notato la differenza rispetto alla scorsa “lezione” è che ci siamo evitati di dover associare ad ogni elemento del form un valore con val(), e di dover scrivere la stringa in ajax.data. Nell’esempio ho predisposto anche un comodo alert che vi farà capire cosa (e come) state passando al file php. Ovviamente rimuovete l’alert a fine lavoro 😉

NOTA: Mi raccomando di selezionare accuratamente il form da “associare” al metodo serialize, evitando sopratutto i nomi duplicati!

Elaborare i dati passati con serialize()

Bene ora che avete passato i dati in tutta comodità (di fatto la stringa “data” di jquery ajax è stata riempita automaticamente), potete elaborare i risultati. Come? bhè per fortuna serialize passa i dati in modo molto semplice. Per recuperargli nel vostro file elaborazione.php usate POST + #id dell’input del form. Nel nostro esempio (giusto per fare chiarezza):

$testo = $_POST['testo'];
$testo2 = $_POST['testo2'];

Un accorgimento importante se usate serialize() è sicuramente quello di filtrare il POST con la funzione PHP urldecode. Ecco quindi il codice completo:

File: elaborazione.php

//recupero 
$testo= urldecode($_POST['testo']); 
$testo2= urldecode($_POST['testo2']);
//stampo i risultati 
echo $testo; echo "<br />";
echo $testo2; echo "<br />";

Uso con le checkboxes

E se nel nostro form avessimo la necessità di usare questo metodo con delle checkboxes multiple? Bhè il procedimento è circa il medesimo ma dovrete “scompattare” l’array recuperato in questo modo:

$nomi = $_POST['nomi']; foreach($nomi as $value){ echo $value; }

Conclusioni e Informazioni utili

Per concludere serialize() è sicuramente una funzione “che cambia la vita” dello sviluppatore a patto che si usino determinati criteri. Il mio consiglio è quello di impratichirsi con il primo metodo, molto più prolisso ma che vi farà capire appieno la struttura ajax. Una volta imparato per bene… bhè serialize() è quello che fa per voi 😉

Concludo con alcuni link interessanti per ampliare l’argomento nel modo giusto:

[button link=”http://api.jquery.com/serialize/” color=”blue”]Docs ufficiale Serialize()[/button]
[button link=”http://www.targetweb.it/ajax-form-invio-dati-via-post/” color=”blue”]Primi passi con jQuery ajax[/button]
[button link=”http://php.net/manual/en/function.urldecode.php” color=”blue”]uso di Urldecode PHP[/button]

L’articolo ti è stato utile? Condividi e commenta!