Come utilizzare AJAX per inviare un modulo Web

Potresti aver letto la nostra guida jQuery Una guida di base per JQuery per programmatori Javascript Una guida di base per JQuery per programmatori Javascript Se sei un programmatore Javascript, questa guida a JQuery ti aiuterà a iniziare a programmare come un ninja. Ulteriori informazioni, oltre alla quinta parte del nostro tutorial su jQuery su AJAX jQuery Tutorial (parte 5): AJAX Them All! jQuery Tutorial (parte 5): AJAX tutti! Mentre siamo vicini alla fine della nostra serie di mini-tutorial di jQuery, è giunto il momento di dare un'occhiata più approfondita a una delle funzionalità più utilizzate di jQuery. AJAX consente a un sito Web di comunicare con ... Ulteriori informazioni, ma oggi ti mostrerò come utilizzare AJAX per inviare dinamicamente un modulo web. JQuery è di gran lunga il modo più semplice per usare AJAX, quindi controlla la nostra esercitazione introduttiva jQuery Tutorial - Per iniziare: Nozioni di base e selettori jQuery Tutorial - Per iniziare: Nozioni di base e selettori La settimana scorsa, ho parlato di quanto sia importante jQuery per qualsiasi sviluppatore web moderno e perché è fantastico. Questa settimana, penso che sia ora che ci sporchiamo le mani con un po 'di codice e abbiamo imparato come ... Leggi di più se sei un principiante. Facciamo un salto.

Perché usare AJAX

Forse ti starai chiedendo “Perché ho bisogno di AJAX?” L'HTML è perfettamente in grado di inviare moduli, e lo fa in modo abbastanza indolore. AJAX è implementato in una grande maggioranza di pagine Web e la sua popolarità continua a crescere.

L'enorme vantaggio che AJAX offre è la capacità di parzialmente carico parti di pagine Web. Questo rende le pagine più veloci e reattive e salva la larghezza di banda semplicemente ricaricando una piccola porzione di dati anziché l'intera pagina. Ecco alcuni casi di utilizzo AJAX di base:

• Controlla regolarmente le nuove email.
• Aggiorna un punteggio di calcio dal vivo ogni 30 secondi.
• Aggiorna il prezzo per un'asta online.

AJAX offre a te, lo sviluppatore, la possibilità quasi illimitata di rendere le pagine web veloci, reattive e scattanti - qualcosa che i tuoi visitatori ti ringrazieranno per.

L'HTML

Prima di iniziare, è necessario un modulo HTML. Se non sai cos'è l'HTML, leggi la nostra guida su come creare un sito web per principianti Come creare un sito web: per principianti Come creare un sito web: per principianti Oggi ti guiderò attraverso il processo di creazione un sito Web completo da zero. Non ti preoccupare se questo sembra difficile. Ti guiderò in ogni fase del percorso. Leggi di più .

Ecco l'HTML che ti serve:

       
 Nome:  Età:   
   

Questo HTML definisce un modulo con pochi elementi. Nota come ci sono azione e metodo attributi. Questi definiscono dove e come viene inviato il modulo. Non sono necessari quando si utilizza AJAX, ma è una buona idea utilizzarli, in quanto garantisce che i visitatori del tuo sito Web possano ancora utilizzarli se hanno JavaScript disabilitato. Questa pagina include jQuery ospitata da Google sul proprio CDN Quali CDN sono e Perché lo spazio di archiviazione non è più un problema Quali sono i CDN e perché lo spazio di archiviazione non è più un problema I CDN rendono Internet veloce ei siti Web accessibili anche quando si scalano milioni di utenti. In primo luogo, la larghezza di banda costa denaro; quelli di noi con contratti limitati lo sanno fin troppo bene. Non solo tu ... Leggi altro. Il capo contiene a copione tag: è qui che scriverai il tuo codice.

Questo modulo potrebbe sembrare un po 'noioso in questo momento, quindi potresti prendere in considerazione l'apprendimento di CSS 5 Baby Steps to Learning CSS e diventare un Kick-Ass CSS Sorcerer 5 Baby Steps to Learning CSS e diventare un Kick-Ass CSS Sorcerer CSS è il singolo le più importanti pagine web di cambiamento sono state viste nell'ultimo decennio e ha aperto la strada alla separazione tra stile e contenuto. Nel modo moderno, XHTML definisce la struttura semantica ... Leggi di più per animare un po '.

Il JavaScript

Esistono diversi modi per inviare moduli con JavaScript. Il primo e più semplice modo per farlo è attraverso il Sottoscrivi metodo:

. Document.getElementById ( 'myForm') submit ();

Ovviamente puoi scegliere come target il modulo con jQuery, ma non fa alcuna differenza:

$ ( '# MyForm') submit ().;

Questo comando indica al tuo browser di inviare il modulo, esattamente come premere il pulsante di invio. Mira al modulo con il suo id, e in questo caso, quello è myForm. Questo non è AJAX, quindi ricaricherà l'intera pagina - qualcosa che non è sempre auspicabile.

Nel metodo attributo del tuo modulo, hai specificato come inviare il modulo. Questo può essere INVIARE o OTTENERE. Questo attributo non viene utilizzato quando si inviano moduli utilizzando AJAX, ma è possibile utilizzare lo stesso metodo.

Gran parte del Web moderno viene eseguito su richieste GET o POST. In generale, GET viene utilizzato per recuperare i dati, mentre il POST viene utilizzato per inviare dati (e restituire una risposta). I dati possono essere inviati con GET, ma il POST è quasi sempre la scelta migliore, in particolare per i dati dei moduli. Potresti aver già visto richieste GET - inviano i dati allegati all'URL:

somewebsite.com/index.html?name=Joe

Il punto interrogativo indica al browser che i dati immediatamente successivi non devono essere utilizzati per attraversare il sito Web, ma devono essere passati alla pagina per elaborarli. Questo funziona bene per cose semplici come un numero di pagina, ma ha alcuni inconvenienti:

Limite massimo di caratteri: C'è un numero massimo di caratteri che possono essere inviati in un url. Potresti non averne abbastanza se stai cercando di inviare una grande quantità di dati.
Visibilità: Chiunque può vedere i dati inviati in una richiesta GET - non va bene per dati sensibili come password o dati dei moduli.

Le richieste POST funzionano in modo simile, solo che non inviano i dati nell'URL. Ciò significa che è possibile inviare una quantità maggiore di dati (i dati sono noti come a carico utile) e si ottiene un po 'di sicurezza non esponendo i dati. I dati possono comunque essere facilmente accessibili, quindi cerca un certificato SSL Cos'è un certificato SSL e ne hai bisogno? Cos'è un certificato SSL e ne hai bisogno? Navigare su Internet può essere spaventoso quando sono coinvolte informazioni personali. Leggi di più se vuoi la massima tranquillità.

Se viene utilizzato POST o GET, i dati vengono inviati chiave -> valore accoppiamenti. Nell'URL sopra, la chiave è nome, e il valore è Joe.

Il modo migliore per inviare moduli è da utilizzare JavaScript asincrono e XML (AJAX). JavaScript supporta le chiamate AJAX, ma possono essere confuse da usare. JQuery implementa questi stessi identici metodi, ma lo fa in un modo facile da usare. Puoi istruire il tuo browser a eseguire una richiesta GET o POST - attenersi al POST per questo esempio, ma le richieste GET vengono eseguite in modo simile.

Ecco la sintassi:

$ .post ('some / url', $ ('# myForm'). serialize ());

Questo codice fa molte cose. La prima parte ($) consente al browser di sapere che si desidera utilizzare jQuery per questa attività. La seconda parte chiama il inviare metodo da jQuery. Devi passare in due parametri; Il primo è l'url per inviare i dati a, mentre il secondo è i dati. Potresti trovare (a seconda dell'URL a cui stai tentando di accedere), che i tuoi browser stessa origine la politica di sicurezza potrebbe interferire qui. È possibile abilitare la condivisione delle risorse tra origini per aggirare questo problema, ma semplicemente puntare a un URL ospitato nello stesso dominio della pagina è spesso sufficiente.

Il secondo parametro chiama jQuery serializzare metodo sul tuo modulo. Questo metodo accede a tutti i dati dal tuo modulo e li prepara per la trasmissione - li serializza.

Questo codice è sufficiente per inviare un modulo, ma è possibile che le cose siano un po 'strane. Vale la pena esaminare gli strumenti di sviluppo del browser, in quanto rendono le richieste di debug della rete un gioco da ragazzi.

In alternativa, Postman è un eccellente strumento gratuito per testare le richieste HTTP.

Se si desidera inviare il modulo utilizzando AJAX quando viene premuto il pulsante di invio, è altrettanto semplice. Devi allegare il tuo codice al Sottoscrivi evento del modulo. Ecco il codice:

$ (document) .on ('submit', '# myForm', function () $ .post ('some / url', $ ('# myForm'). serialize ()); return false;);

Questo codice fa molte cose. Quando il modulo viene inviato, viene il browser e viene eseguito prima il codice. Il tuo codice invia quindi i dati del modulo utilizzando AJAX. Il passaggio finale richiesto è impedire l'invio del modulo originale: l'hai già fatto con AJAX, quindi non vuoi che accada di nuovo!

Se vuoi eseguire qualche altra attività una volta che AJAX ha terminato (o forse anche restituire un messaggio di stato), devi usare un richiama. JQuery rende questi strumenti molto facili da usare: basta passare una funzione come un altro parametro come questo:

$ .post ('url', $ ('# myForm'). serialize (), function (result) console.log (risultato);

Il risultato argomento contiene tutti i dati restituiti dall'URL in cui sono stati inviati i dati. Puoi facilmente rispondere a questi dati:

if (result == 'success') // fai qualche task else // fai qualche altra operazione 

Questo è tutto per questo post. Si spera che ora abbiate una solida comprensione delle richieste HTTP e di come AJAX funzioni nel contesto di un modulo.

Hai imparato nuovi trucchi oggi? Come usi AJAX con le forme? Fateci sapere i vostri pensieri nei commenti qui sotto!

Crediti immagine: vectorfusionart / Shutterstock

Scopri di più su: JavaScript, jQuery, Sviluppo Web.