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!

  1. ciao sto implementando questo script su un gestionale che sto realizzando e lo trovo ottimo!
    ora ho un problema.
    nella pagina ho due form con tabelle.
    dopo la prima form ho aggiunto lo script che hai realizzato e funziona alla perfezione.

    la stessa cosa l’ho fatta per il secondo form ma non passa alcun valore.
    posso aver sbagliato qualche cosa?
    ho modificato a dovere i dati (id del form, id del button e pagina di destinazione dei dati.

  2. p.s. dimenticavo di premettere che la pagina contente i form viene già caricata con script ajax.

    ho una pagina con div header – menu – main – footer.
    ho utilizzato questo script ajax per caricare le pagine del menu nel div main.

    $(“#menu ul li”).click(function() {
    var pagina = $(this).attr(“id”);
    $.ajax({
    type: “POST”,
    url: pagina + “.php”,
    success: function(response) {
    $(“#main”).html(response);
    }
    });
    });

    ora, se apro la pagina specifica con i form di modifica tutto funziona al meglio, se la carico dal menu il processo di aggiornamento funziona solo per il primo form e non per il secondo.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

Up Next:

Php: unire due variabili insieme

Php: unire due variabili insieme