Corsi on-line

Serializzazione degli input da form con jQuery

La serializzazione è in sostanza un processo attraverso il quale archiviare una serie di dati all’interno di uno spazio di memoria in modo che possano essere trasmessi ed elaborati; nel caso specifico del framework JavaScript jQuery, il metodo serialize() consente di generare un URL contenente una stringa testuale tramite la serializzazione dei valori inviati attraverso un form sotto forma di parametri di input.

jQuery

A rendere particolarmente utile l’impiego di questo metodo è il fatto che esso permette di selezionare uno o più elementi di un form o lo stesso elemento form in modo da poter gestire tutte le informazioni veicolabili a partire da quest’ultimo; lo sviluppatore avrà quindi la possibilità di utilizzare i valori serializzati all’interno dell’URL prodotta da serialize() attraverso delle apposite richieste basate su AJAX.

La sintassi prevista per l’uso di tale metodo prevede la definizione di un selettore da associare ad esso. A questo proposito l’esempio seguente mostra il codice necessario per intercettare i dati da serializzare in seguito alla pressione di un comune button.

$(document).ready(function(){
    $("button").click(function(){
        $("div").text($("form").serialize());
    });
});

Come è possibile notare, lo snippet non presenta alcun riferimento specifico ai parametri che verranno inviati dal form, ciò rappresenta un vantaggio non indifferente in sede di digitazione dei sorgenti; detto questo, posto che come è possibile notare form sarà il nostro selettore di riferimento, sarà possibile creare il form deputato all’invio delle informazioni da serializzare e il button che determinerà la serializzazione:

</pre>
<pre><form action="serial.html">
            <label for="nome">Nome</label>
            <input type="text" name="nome" id="nome" value="Homer"><br />
            <label for="cognome">Cognome</label>
            <input type="text" name="cognome" id="cognome" value="Simpson"><br />
</form>

L’utilizzo dei metodi click(), associato al selettore button, e text(), selettore div, stabiliscono innanzitutto la necessità che si verifichi un evento (il click sul button) e, in secondo luogo, la scrittura della query string generata dalla serializzazione all’interno di un contenitore (il div). Una volta premuto il pulsante “Invia” si dovrebbe ottenere un output come il seguente:

nome=Homer&cognome=Simpson

Per comodità del lettore riportiamo di seguito l’intero codice della pagina creata per l’esempio proposto:

<!DOCTYPE html>
<html>
    <head>
        <title>Serializzazione con jQuery</title>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("div").text($("form").serialize());
            });
        });
        </script>
    </head>
    <body>
        <form action="serial.html">
            <label for="nome">Nome</label>
            <input type="text" name="nome" id="nome" value="Homer"><br />
            <label for="cognome">Cognome</label>
            <input type="text" name="cognome" id="cognome" value="Simpson"><br />
        </form>
        <button>Invia</button>
        <div></div>
    </body>
</html>
Post correlati
I più letti del mese
Tematiche