I moduli del sito web normalmente funzionano sulla base del fatto che il browser dell’utente recupera una nuova pagina quando il modulo viene inviato. Tuttavia, utilizzando AJAX e jQuery, è possibile creare un modulo Web in cui i dati dell’utente vengono acquisiti, inviati al server ed elaborati, quindi la risposta viene scritta nella pagina corrente. Il processo prevede markup HTML, JavaScript, incluso jQuery e un linguaggio di scripting lato server come PHP. La quantità di elaborazione lato server dipende da cosa si desidera fare con i dati utente inviati.
1
Crea il modulo della tua pagina Web. È possibile creare un modulo HTML per acquisire molti tipi diversi di informazioni sull’utente. Il seguente markup di esempio mostra un modulo semplice con un singolo campo di testo per dimostrazione, ma puoi aggiungere tutti gli elementi di cui hai bisogno:
Inserisci una parola:
Questo markup può essere visualizzato ovunque nella sezione del corpo della pagina HTML. Il modulo include un’etichetta, un campo di testo e un pulsante “Invia”.
2
Gestisci gli utenti che inviano i dati del modulo. Quando gli utenti premono il pulsante “Invia”, il codice deve rilevarlo e acquisire i dati. Aggiungi il seguente codice all’interno di un elemento script nella sezione head della tua pagina HTML:
$ (documento) .ready (function () {$ (‘# submit’). click (function () {
var word = $ (“input # word”). val (); $ .ajax ({url: “handle_data.php”, type: “GET”, data: “word =” + word,
cache: false, success: function (html) {
$ (‘# form_area’). html (“Grazie per averci inviato la tua parola!”); }}); return false; }); });
Questo codice cattura il testo inserito dall’utente quando ha premuto il pulsante “Invia”. Quindi chiama la funzione jQuery AJAX, passandole i dati più i dettagli dello script lato server. La sezione AJAX istruisce anche il browser a sostituire il form sulla pagina quando il risultato viene ricevuto dal server, inserendo un messaggio standard dove si trovava il form.
3
Crea il tuo script lato server. Il codice di esempio specifica uno script PHP denominato “handle_data.php” che è memorizzato sullo stesso server della pagina Web. Puoi modificarlo per adattarlo al tuo sito, ma crea uno script PHP o ASP in un editor di testo, salvandolo con un nome a tua scelta e alterando il codice jQuery per abbinarlo. Il contenuto dello script lato server deve essere adattato alle esigenze del tuo sito. Ad esempio, potresti voler salvare i dati in un database. Il seguente codice di esempio PHP acquisisce semplicemente i dati passati:
Il valore restituito true richiede al browser di scrivere il messaggio nella pagina dell’utente.