Come utilizzare AJAX per inviare un modulo Web

Annuncio pubblicitario

Potresti aver letto il nostro Guida di jQuery Una guida di base a JQuery per programmatori JavascriptSe sei un programmatore Javascript, questa guida a JQuery ti aiuterà a iniziare a scrivere codice come un ninja. Leggi di più , così come la quinta parte della nostra Tutorial jQuery su AJAX Tutorial jQuery (parte 5): AJAX, tutti!Mentre ci avviciniamo alla fine della nostra serie di mini-tutorial su jQuery, è giunto il momento di dare uno sguardo più approfondito a una delle funzionalità più utilizzate di jQuery. AJAX consente a un sito Web di comunicare con ... Leggi di più , ma oggi ti mostrerò come utilizzare AJAX per inviare dinamicamente un modulo web. JQuery è di gran lunga il modo più semplice per utilizzare AJAX, quindi dai un'occhiata al nostro tutorial per iniziare Tutorial jQuery - Per iniziare: Nozioni di base e selettoriLa scorsa settimana, ho parlato dell'importanza di jQuery per qualsiasi sviluppatore web moderno e del perché sia ​​fantastico. Questa settimana, penso che sia tempo di sporcarci 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 nella maggior parte delle pagine Web e la sua popolarità continua ad aumentare.

L'enorme vantaggio che AJAX offre è la possibilità di farlo carico parziale parti di pagine Web. Ciò rende le pagine più veloci e più reattive e consente di risparmiare larghezza di banda semplicemente ricaricando una piccola porzione di dati anziché l'intera pagina. Ecco alcuni casi d'uso di base di AJAX:

• Controlla regolarmente nuove e-mail.
• Aggiorna un punteggio di calcio in diretta ogni 30 secondi.
• Aggiorna il prezzo per un'asta online.

AJAX offre a te, lo sviluppatore, una capacità pressoché illimitata di rendere le pagine Web veloci, reattive e scattanti, cosa per la quale i tuoi visitatori ti ringrazieranno.

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 principiantiOggi ti guiderò attraverso il processo di creazione di un sito Web completo da zero. Non preoccuparti se questo sembra difficile. Ti guiderò attraverso ogni passaggio. Leggi di più .

Ecco l'HTML che ti serve:

 Nome: Età: 

Questo html definisce un modulo con alcuni 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 usarli, in quanto garantisce che i visitatori del proprio sito Web possano comunque utilizzarlo se JavaScript è disattivato. Questa pagina include jQuery ospitato da Google sul loro CDN Che cosa sono i CDN e perché l'archiviazione non è più un problemaLe reti CDN rendono Internet veloce e i siti Web accessibili anche quando si passa a milioni di utenti. Innanzitutto, la larghezza di banda costa denaro; quelli di noi con contratti limitati lo sanno fin troppo bene. Non solo tu ... Leggi di più . Il testa contiene a copione tag: è qui che scriverai il tuo codice.

Questo modulo può sembrare un po 'noioso in questo momento, quindi potresti voler considerare apprendimento dei CSS 5 piccoli passi per apprendere il CSS e diventare uno stregone CSSIl CSS è la singola modifica più importante che le pagine Web hanno visto nell'ultimo decennio e ha spianato la strada alla separazione di stile e contenuto. In modo moderno, XHTML definisce la struttura semantica ... Leggi di più per ravvivare un po '.

JavaScript

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

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

Ovviamente puoi scegliere come target il modulo con jQuery se preferisci: non fa differenza:

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

Questo comando dice al tuo browser di inviare il modulo, esattamente come premendo il pulsante di invio. È indirizzato al modulo in base al suo ID e, in questo caso, è quello myForm. Questo non è AJAX, quindi ricaricherà l'intera pagina, cosa che non è sempre desiderabile.

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

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

somewebsite.com/index.html? Nome = Joe

Il punto interrogativo indica al browser che tutti i dati immediatamente successivi non devono essere utilizzati per attraversare il sito Web, ma devono invece essere passati alla pagina per l'elaborazione. Questo funziona bene per cose semplici come un numero di pagina, ma presenta alcuni svantaggi:

Limite massimo di caratteri: Esiste un numero massimo di caratteri che possono essere inviati in un URL. Potresti non avere abbastanza se stai provando a 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 maggiore quantità di dati (i dati sono noti come a carico utile) e si ottiene una certa sicurezza non esponendo i dati. I dati possono comunque essere facilmente accessibili, quindi guarda in Certificato SSL Che cos'è un certificato SSL e ne hai bisogno?Navigare in Internet può essere spaventoso quando sono coinvolte informazioni personali. Leggi di più se vuoi la massima tranquillità.

Se si utilizza POST o GET, i dati vengono inviati chiave -> valore accoppiamenti. Nell'URL sopra, la chiave è nomee il valore è Joe.

Il modo migliore per inviare i moduli è utilizzare JavaScript e XML asincroni (AJAX). JavaScript supporta le chiamate AJAX, ma possono essere confuse da usare. JQuery implementa esattamente gli stessi metodi, ma lo fa in un modo facile da usare. È possibile indicare al proprio browser di eseguire una richiesta GET o POST; attenersi a POST per questo esempio, ma le richieste GET vengono eseguite in modo simile.

Ecco la sintassi:

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

Questo codice fa diverse cose. La prima parte ($) indica al browser che desideri utilizzare jQuery per questa attività. La seconda parte chiama il inviare metodo da jQuery. Devi passare due parametri; Il primo è l'URL a cui inviare i dati, mentre il secondo sono i dati. Potresti scoprire (a seconda dell'URL a cui stai tentando di accedere), che i tuoi browser " stessa origine la politica di sicurezza può interferire qui. Puoi abilitare condivisione delle risorse tra le origini per ovviare a questo, ma spesso è sufficiente puntare a un URL ospitato sullo stesso dominio della tua pagina.

Il secondo parametro chiama jQuery serialize metodo nel modulo. Questo metodo accede a tutti i dati dal modulo e li prepara per la trasmissione: li serializza.

Questo codice da solo è sufficiente per inviare un modulo, ma potresti scoprire che le cose si comportano in modo un po 'strano. Vale la pena indagare sugli strumenti per gli sviluppatori del browser, in quanto questi rendono le richieste di rete di debug un gioco da ragazzi.

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

Se desideri inviare il modulo utilizzando AJAX quando viene premuto il pulsante di invio, è altrettanto facile. Devi allegare il tuo codice al Invia evento del modulo. Ecco il codice:

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

Questo codice fa diverse cose. Quando il modulo viene inviato, viene visualizzato il browser ed esegue prima il codice. Il codice quindi invia 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 si desidera eseguire qualche altra attività al termine di AJAX (o magari anche restituire un messaggio di stato), è necessario utilizzare un richiama. JQuery li rende molto facili da usare: è sufficiente passare una funzione come un altro parametro come questo:

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

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

if (risultato == 'successo') {// esegue alcune attività. } else {// svolge qualche altra attività. }

Questo è tutto per questo post. Spero che tu abbia una solida conoscenza delle richieste HTTP e di come AJAX funzioni nel contesto di un modulo.

Hai imparato qualche nuovo trucco oggi? Come si usa AJAX con i moduli? Facci sapere cosa ne pensi nei commenti qui sotto!

Crediti immagine: vectorfusionart / Shutterstock