Share
Precedentemente su Nettuts +, Philo ha mostrato come è possibile utilizzare jQuery per aggiungere la convalida del modulo ai commenti di wordpress che funzionano senza ricaricare la pagina. Un altro ottimo modo di utilizzare jQuery per migliorare l'esperienza utente è non solo di convalidare, ma di inviare il modulo completamente senza un aggiornamento della pagina.
In questo tutorial ti mostrerò quanto è facile fare proprio questo: invia un modulo di contatto che invia un'email, senza aggiornare la pagina usando jQuery! (L'e-mail effettiva viene inviata con uno script php che viene elaborato in background). Iniziamo.
Se si desidera una soluzione già pronta, provare il modulo di contatto Ultimate PHP, HTML5 e AJAX o sfogliare gli altri script di moduli in vendita sul mercato Envato.
Script di moduli e plug-in per la vendita su Envato Market In questo esempio, abbiamo un semplice modulo di contatto con nome, e-mail e numero di telefono. Il modulo invia tutti i campi a uno script php senza aggiornamento della pagina, utilizzando le funzioni native jQuery (significato nativo, non è necessario scaricare alcun plugin aggiuntivo per farlo funzionare.
Se hai trovato questo articolo senza alcuna familiarità con jQuery, un ottimo punto di partenza sarebbe l'articolo di Jeffrey Way su 15 Risorse per iniziare con jQuery From Scratch.
Diamo un'occhiata al nostro markup html. Iniziamo con il nostro modulo html di base:
Potresti notare che ho incluso un div con id contact_form che include l'intero modulo.
Assicurati di non perdere quel div nella tua stessa forma in quanto avremo bisogno di questo div wrapper in seguito. tu
potrebbe anche notare che ho lasciato in bianco sia l'azione che le parti del metodo del tag form. Noi
in realtà non ho bisogno di nessuno di questi qui, perché jQuery si prende cura di tutto questo in seguito.
Un'altra cosa importante per essere sicuri di includere è i valori di id per ogni campo di input. I valori di identificazione
sono ciò che il tuo script jQuery cercherà per elaborare il modulo con.
Ho aggiunto alcuni stili CSS e un'immagine di sfondo in Photoshop per produrre il seguente modulo:
Il prossimo passo nel processo è aggiungere del codice jQuery. Presumo che tu abbia scaricato jQuery, caricato sul tuo server e lo stia facendo riferimento nella tua pagina web.
Successivamente, apri un altro nuovo file javascript, facendolo riferimento nel tuo html come faresti con qualsiasi normale file javascript,
e aggiungi il seguente:
Accentsconagua
$ (function () $ (". button"). click (function () // convalida ed elabora il modulo qui);); Quello che fa la prima funzione (), carica gli eventi all'interno, non appena il documento html è pronto. Se hai già lavorato in jQuery in precedenza, la funzione è la stessa della funzione document.ready di jQuery. Quindi iniziamo con quello, e all'interno abbiamo la nostra funzione click che viene eseguita facendo clic sul pulsante di invio con il nome della classe di "pulsante". In ultima analisi, ciò che abbiamo ottenuto con queste linee di codice è lo stesso come se dovessimo aggiungere un evento onclick al pulsante di invio in html. Il motivo per cui lo facciamo con jQuery è per la netta separazione della nostra presentazione dai nostri script.
$ (function () $ ('. error'). hide (); $ (". button"). click (function () // convalida ed elabora il modulo qui $ ('. error'). hide () ; var name = $ ("input # name"). val (); if (name == "") $ ("label # name_error"). show (); $ ("input # name"). focus ( ) restituisce false; var email = $ ("input # email"). val (); if (email == "") $ ("label # email_error"). show (); $ ("input # email ") .focus (); restituisce false; var phone = $ (" input # phone "). val (); if (phone ==" ") $ (" label # phone_error "). show (); $ ("input # phone"). focus (); return false;);); All'interno della nostra funzione che carica quando la pagina è pronta, aggiungiamo qualche convalida del modulo. Ma la prima cosa che vedi aggiunta è $ ('. Error'). Hide () ;. Ciò che fa è nascondere le nostre 3 etichette con il nome della classe "errore". Vogliamo che queste etichette siano nascoste non solo quando
la pagina viene caricata prima, ma anche quando si fa clic su Invia, nel caso in cui uno dei messaggi sia stato mostrato all'utente in precedenza. Ogni messaggio di errore dovrebbe apparire solo se la validazione non funziona.
Verifichiamo innanzitutto controllando se il campo del nome è stato lasciato vuoto dall'utente, e se lo è, mostriamo quindi l'etichetta con id di name_error. Quindi poniamo l'attenzione sul campo di inserimento del nome, nel caso in cui l'utente
è del tutto confuso su cosa fare dopo! (Ho imparato a non assumere mai troppo quando si tratta di formare utenti).
Per spiegare più dettagliatamente come stiamo facendo questo, impostiamo una variabile 'nome' sul valore del campo di input con id "nome" - tutto con una riga di jQuery:
var name = $ ("input # name"). val (); Controlliamo quindi se quel valore è vuoto, e se lo è, usiamo il metodo show () di jQuery per mostrare l'etichetta con
id "nome_error":
if (name == "") $ ("label # name_error"). show (); Quindi, posizioniamo il focus del modulo sul campo di input con id di "name" e infine restituiamo false:
if (name == "") $ ("label # name_error"). show (); . $ ( "# Ingresso name") messa a fuoco (); restituisce falso; Assicurati di aver restituito false nel tuo codice, altrimenti viene inviato l'intero modulo (che sconfigge
lo scopo di questo tutorial)! Quello che fa false false è che impedisce all'utente di procedere oltre
senza compilare i campi richiesti.
Ora arriviamo al cuore del tutorial, inviando il nostro modulo senza aggiornamento della pagina, che invia i valori del modulo a uno script php in background. Diamo prima un'occhiata a tutto il codice, poi analizzerò più in dettaglio. Aggiungi il seguente codice appena sotto lo snippet di validazione che abbiamo aggiunto in precedenza (e prima che la funzione clic del pulsante sia chiusa):
var dataString = 'name =' + name + '& email =' + email + '& phone =' + telefono; // alert (dataString); restituisce false; $ .ajax (tipo: "POST", url: "bin / process.php", data: dataString, success: function () $ ('# contact_form'). html (""); $ ('# message'). html ("Modulo di contatto inviato!
") .append ("Saremo in contatto al più presto.
") .hide () .fadeIn (1500, function () $ ('# message'). append ("
"););); restituisce falso; Abbiamo molto da fare qui! Rompiamo tutto - è così semplice e facile da usare una volta compreso il processo. Per prima cosa creiamo una stringa di valori, che sono tutti i valori dei moduli che vogliamo trasmettere allo script che invia l'email.
Ricordiamo in precedenza, abbiamo impostato una variabile 'nome' con il valore del campo di input con id "nome", in questo modo:
"););); restituisce falso; var name = $ ("input # name"). val (); Possiamo usare di nuovo il valore "nome", nonché i valori "email" e "telefono" per creare la nostra stringa di dati:
var dataString = 'name =' + name + '& email =' + email + '& phone =' + telefono;
Ho commentato un avviso che a volte uso per essere sicuro di prendere i valori corretti, che potresti trovare utili nel processo. Se disattivi quell'avviso e metti alla prova il tuo modulo, assumendo che tutto sia andato bene finora, dovresti ottenere un messaggio simile al seguente:
Ora arriviamo alla nostra principale funzione ajax, la star dello show di oggi. È qui che avviene tutta l'azione, quindi paga
molta attenzione!
$ .ajax (tipo: "POST", url: "bin / process.php", data: dataString, success: function () // visualizza nuovamente il messaggio all'utente); restituisce falso;
Fondamentalmente ciò che sta accadendo nel codice è questo: la funzione .ajax () elabora i valori dalla nostra stringa chiamata dataString (data: dataString) con uno script php chiamato process.php (url: "bin / process.php"), usando il metodo "POST" (tipo: "POST"). Se il nostro script viene elaborato correttamente, possiamo quindi visualizzare un messaggio all'utente, e alla fine restituire false in modo che la pagina non venga ricaricata. Questo è tutto! L'intero processo è gestito proprio lì in queste poche righe!
Ci sono cose più avanzate che puoi fare qui, oltre all'invio di una e-mail e un messaggio di successo. Ad esempio, è possibile inviare i valori a un database, elaborarli, quindi visualizzare i risultati all'utente. Pertanto, se hai inviato un sondaggio agli utenti, puoi elaborare il loro voto, quindi restituire i risultati della votazione, il tutto senza richiedere alcun aggiornamento della pagina.
Riassumiamo cosa è successo nel nostro esempio, per essere sicuri di aver coperto tutto. Abbiamo afferrato i nostri valori del modulo con jQuery e quindi li abbiamo inseriti in una stringa come questa:
var name = $ ("input # name"). val (); var email = $ ("input # email"). val (); var phone = $ ("input # phone"). val (); var dataString = 'name =' + name + '& email =' + email + '& phone =' + telefono; Quindi abbiamo usato la funzione Ajax di jQuery per elaborare i valori in dataString. Dopo di che
processo termina con successo, mostriamo un messaggio all'utente e aggiungiamo return false in modo che la nostra pagina non si aggiorni:
$ .ajax (tipo: "POST", url: "bin / process.php", data: dataString, success: function () $ ('# contact_form'). html (""); $ ('# message'). html ("Modulo di contatto inviato!
") .append ("Saremo in contatto al più presto.
") .hide () .fadeIn (1500, function () $ ('# message'). append (""););); restituisce falso; La parte positiva dello script è stata compilata con alcuni contenuti specifici che possono essere visualizzati all'utente. Ma per quanto riguarda la nostra funzionalità Ajax, questo è tutto ciò che c'è da fare. Per ulteriori opzioni e impostazioni assicurati di controllare la documentazione di jQuery sulla funzione Ajax. L'esempio qui è una delle più semplici implementazioni, ma anche così, è molto potente come puoi vedere.
Diamo una breve occhiata alla parte del codice che mostra il nostro messaggio all'utente, per completare il tutorial.
Innanzitutto, cambiamo l'intero contenuto del div contact_form (ricorda che ho detto che avremmo avuto bisogno di quel div) con la seguente riga:
$ ( '# Contact_form'). Html (""); Ciò che è stato fatto è sostituito da tutto il contenuto all'interno del div contact_form, usando la funzione html () di jQuery. Quindi, invece di un modulo, ora abbiamo solo un nuovo div all'interno, con l'id del 'messaggio'. Successivamente, riempiamo quel div con un messaggio reale - un h2 che dice "Modulo di contatto inviato":
$ ( '# Messaggio'). Html ("Modulo di contatto inviato!
") Successivamente aggiungiamo ancora più contenuti al messaggio div con la funzione append () di jQuery, e per finire tutto aggiungiamo un effetto interessante nascondendo il messaggio div con la funzione jQuery hide (), quindi sfumando tutto con il file fadeIn () funzione:
.aggiungere("Saremo in contatto al più presto.
") .hide () .fadeIn (1500, function () $ ('# message'). append ("");); Quindi l'utente finisce per vedere quanto segue dopo aver inviato il modulo:
A questo punto, penso che dovrai essere d'accordo sul fatto che è incredibilmente facile inviare moduli senza aggiornare la pagina usando la potente funzione Ajax di jQuery. Ottieni i valori nel tuo file javascript, elaborali con la funzione Ajax e restituisci false, e sei a posto. Puoi elaborare i valori nel tuo script php come faresti con qualsiasi altro file php, con la sola differenza che l'utente non deve aspettare un aggiornamento della pagina - tutto avviene silenziosamente in background.
Quindi, se hai un modulo di contatto sul tuo sito Web, un modulo di accesso o moduli ancora più avanzati che elaborano i valori attraverso un database e recuperano i risultati, puoi fare tutto in modo semplice ed efficiente e, forse, soprattutto, migliorare l'utente finale esperienza con il tuo sito web fornendo interattività senza dover aspettare che la pagina venga ricaricata.
Vorrei aggiungere alcune parole finali sull'esempio demo fornito. Nella demo, potresti notare che in effetti viene utilizzato un plug-in: il file runonload.js. All'inizio del tutorial ho dichiarato che non useremmo alcun plugin, e poi nella demo c'è uno script di runload aggiuntivo, quindi potrebbe essere necessaria qualche spiegazione! Per chiunque sia interessato a vedere una demo dal vivo, è possibile visualizzare il modulo di consulenza SEO del mio sito.
L'unico utilizzo che ho fatto con runonload in realtà non ha nulla a che fare con l'elaborazione del modulo. In questo modo puoi svolgere completamente le funzioni di ajax senza plug-in aggiuntivi. Ho usato solo runload per mettere a fuoco il campo di inserimento del nome al caricamento della pagina. È stata la mia esperienza che chiamare run runload può a volte essere un sostituto migliore per la funzione di documento nativo di jQuery, e ho scoperto che è il caso di mettere insieme questo tutorial. Per qualche motivo la funzione focus () non funzionerebbe sul caricamento della pagina usando la funzione nativa del documento jQuery - ma funzionava con runonload, ed è per questo che la trovi come parte dell'esempio. Quindi, se sei a conoscenza di un modo per ottenerlo senza usare runload, sarei felice di sentirti parlare di questo.
Abbiamo creato una guida completa per aiutarti a imparare JavaScript, sia che tu stia appena iniziando come sviluppatore web o che desideri esplorare argomenti più avanzati.
