Share
Anterior, pe Nettuts +, Philo a arătat cum puteți utiliza jQuery pentru a adăuga validarea formularului la comentariile wordpress care funcționează fără reîncărcarea unei pagini. O altă modalitate excelentă de a utiliza jQuery pentru a îmbunătăți experiența utilizatorului este de a nu valida, ci de a vă trimite formularul în întregime fără o reîmprospătare a paginii.
În acest tutorial vă voi arăta cât de ușor este să faceți acest lucru - trimiteți un formular de contact prin care trimiteți un e-mail, fără reîmprospătarea paginii utilizând jQuery! (E-mailul real este trimis cu un script php care procesează în fundal). Să începem.
Dacă doriți o soluție gata făcută, încercați formularul de contact Ultimate PHP, HTML5 & AJAX sau răsfoiți celelalte scripturi de formă de vânzare pe Envato Market.
Script-uri de formular și pluginuri de vânzare pe Envato Market În acest exemplu, avem un simplu formular de contact cu numele, e-mailul și numărul de telefon. Formularul supune toate câmpurile unui script php fără reîmprospătarea paginii, utilizând funcții jQuery native (sens nativ, nu este nevoie să descărcați pluginuri suplimentare pentru a-l face să funcționeze.
Dacă ați găsit acest articol fără o familiaritate prealabilă cu jQuery, un loc minunat pentru a începe ar fi articolul lui Jeffrey Way despre 15 resurse pentru a vă începe cu jQuery de la zero.
Să aruncăm o privire la marcajul html. Începem cu formularul nostru de bază HTML:
S-ar putea să observați că am inclus un div cu id contact_form care se înfășoară în jurul întregului formular.
Asigurați-vă că nu pierdeți acel div în forma proprie, deoarece vom avea nevoie mai târziu de această împachetare div. Tu
ar putea, de asemenea, observa că l-am lăsat atât acțiunea, cât și părțile metodei din eticheta de formular necompletate. Noi
de fapt, nu au nevoie de niciunul dintre acestea aici, deoarece jQuery are grijă de toate acestea mai târziu.
Un alt lucru important pe care trebuie să îl includeți este valorile id pentru fiecare câmp de intrare. Valorile id
sunt ceea ce scriptul dvs. de jQuery va căuta să proceseze formularul cu.
Am adăugat câteva stiluri CSS și o imagine de fundal în Photoshop pentru a produce următoarea formă:
Următorul pas în acest proces este adăugarea unui cod jQuery. Voi presupune că ați descărcat jQuery, ați încărcat pe serverul dvs. și îl referenți în pagina dvs. de Web.
Apoi, deschideți un alt fișier javascript nou, referiți-l în html ca și orice fișier javascript normal,
și adăugați următoarele:
Accentsconagua
$ (functie () $ (".button") click (function () // valideaza si proceseaza formularul aici);); Ceea ce face prima funcție () este încărcarea evenimentelor în interior, imediat ce documentul html este gata. Dacă ați efectuat anterior o activitate în jQuery, funcția este aceeași cu funcția document.ready a jQuery. Deci, începem cu asta, iar înăuntru avem funcția noastră de clic care se execută făcând clic pe butonul de trimitere cu numele de clasă a butonului. În cele din urmă ceea ce am realizat cu aceste linii de cod este același ca și cum am adăuga un eveniment onclick la butonul de trimitere în html. Motivul pentru care o facem cu jQuery este pentru o separare clară a prezentării noastre de scenariile noastre.
$ (")" () $ ('. eroare') hide (); $ (" ; nume (= nume de intrare); (nume de intrare nume); val (); if (nume == "") $ ), return (false); var email = $ ("input # email"). "()) .focus (); return false; var phone = $ (" input # phone "). ("intrare # telefon"); focus (); return false;);); În interiorul funcției noastre care se încarcă când pagina este gata, adăugăm o validare a formei. Dar primul lucru pe care îl vedeți a fost adăugat este $ ('. Eroare'). Ceea ce face este ascunde cele 3 etichete cu numele de clasă "eroare". Vrem ca aceste etichete să fie ascunse nu doar când
prima pagină se încarcă, dar și când faceți clic pe Trimiteți, în cazul în care unul dintre mesaje a fost afișat anterior utilizatorului. Fiecare mesaj de eroare ar trebui să apară numai dacă validarea nu funcționează.
Validăm dacă verificăm mai întâi dacă câmpul de nume a fost lăsat necompletat de către utilizator și, dacă este așa, vom afișa eticheta cu id de nume_error. Apoi punem accentul pe câmpul de introducere a numelui, în cazul în care utilizatorul
este deloc confuz cu privire la ceea ce trebuie făcut în continuare! (Am învățat să nu-și asume prea mult atunci când vine vorba de a forma utilizatori).
Pentru a explica în detaliu cum facem acest lucru, am setat o variabilă "name" la valoarea câmpului de intrare cu id "name" - toate cu o singură linie de jQuery:
var nume = $ ("input # nume") val (); Apoi verificăm dacă această valoare este necompletată și dacă este, vom folosi metoda show () a lui jQuery pentru a afișa eticheta cu
id "nume_error":
dacă (nume == "") $ ("label # nume_error") arată (); Apoi, plasăm formularul de focalizare înapoi pe câmpul de introducere cu id de "nume", și în cele din urmă return false:
dacă (nume == "") $ ("label # nume_error") arată (); . $ ( "Intrare nume #") se concentreze (); return false; Asigurați-vă că ați revenit fals în codul dvs., altfel întregul formular este trimis (care învinge
scopul acestui tutorial)! Revenirea falsă este împiedică utilizatorul să procedeze mai departe
fără completarea câmpului (câmpurilor) obligatoriu.
Acum ajungem la inima tutorialului - trimiterea formularului nostru fara reîmprospătarea paginii, care trimite valorile formularului la un php un script în fundal. Să aruncăm o privire mai întâi la tot codul, apoi voi detalia în detaliu în continuare. Adăugați următorul cod chiar sub fragmentul de validare pe care l-am adăugat anterior (și înainte ca funcția de clic pe buton să fie închisă):
var dataString = 'nume =' + nume + '& email =' + email + '& phone =' + telefon; // alertă (dataString); return false; $ .ajax (tip: "POST", url: "bin / process.php", data: dataString, succes: function () $ ('"); $ ('# message'); html ("Formular de contact trimis!
") .append ("Vom fi în legătură în curând.
") .hide () .fadeIn (1500, funcția () $ ('# message') append ("
"););); return false; Avem multe de făcut aici! Să ne descurcăm - este atât de simplu și de ușor de folosit odată ce înțelegeți procesul. Mai întâi creăm un șir de valori, care sunt toate valorile formulelor pe care vrem să le transmitem scriptului care trimite e-mailul.
Amintiți-vă anterior, am stabilit o variabilă "name" cu valoarea câmpului de introducere cu id "name", așa cum este cazul:
"););); return false; var nume = $ ("input # nume") val (); Putem folosi din nou valoarea "nume", precum și valorile "e-mail" și "telefon", pentru a crea șirul nostru de date:
var dataString = 'nume =' + nume + '& email =' + email + '& phone =' + telefon;
Am comentat o alertă pe care o folosesc uneori pentru a fi sigură că apuc valorile potrivite, pe care le-ați putea fi de folos în acest proces. Dacă dezactivați alerta și testați formularul, presupunând că totul a mers până acum, ar trebui să primiți un mesaj similar cu următorul text:
Acum ajungem la principala noastră funcție ajax, steaua spectacolului de astăzi. Aici se întâmplă toată acțiunea, deci plătiți
o atenție deosebită!
$ .ajax (tip: "POST", url: "bin / process.php", data: dataString, succes: function () // afiseaza mesajul inapoi utilizatorului); return false;
Practic, ceea ce se întâmplă în cod este următorul: Funcția .ajax () procesează valorile din șirul nostru numit dataString (data: dataString) cu un script php numit process.php (url: "bin / process.php" metoda "POST" (tip: "POST"). Dacă scriptul nostru a fost procesat cu succes, putem afișa un mesaj înapoi utilizatorului și, în cele din urmă, vom returna false astfel încât pagina să nu se reîncarce. Asta e! Întregul proces este tratat chiar în aceste câteva linii!
Există lucruri mai avansate pe care le puteți face aici, altele decât trimiterea unui e-mail și transmiterea unui mesaj de succes. De exemplu, puteți să trimiteți valorile într-o bază de date, să le procesați, apoi să le afișați înapoi utilizatorilor. Deci, dacă ați postat un sondaj utilizatorilor, ați putea procesa votul, apoi puteți returna rezultatele votării, toate fără a fi necesară o reîmprospătare a paginii.
Să rezumăm ceea ce sa întâmplat în exemplul nostru, pentru a ne asigura că am acoperit totul. Am apucat valorile formularului nostru cu jQuery și apoi le-am plasat pe acestea într-un șir ca acesta:
var nume = $ ("input # nume") val (); var email = $ ("intrare # e-mail") val (); var telefon = $ ("intrare # telefon") val (); var dataString = 'nume =' + nume + '& email =' + email + '& phone =' + telefon; Apoi am folosit funcția ajax a lui jQuery pentru a procesa valorile din dataString. Dupa aceea
procesul se termină cu succes, vom afișa un mesaj înapoi către utilizator și vom adăuga return false pentru ca pagina noastră să nu se actualizeze:
$ .ajax (tip: "POST", url: "bin / process.php", data: dataString, succes: function () $ ('"); $ ('# message'); html ("Formular de contact trimis!
") .append ("Vom fi în legătură în curând.
") .hide () .fadeIn (1500, funcția () $ ('# message') append (""););); return false; Partea de succes a scriptului a fost completat cu un anumit conținut care poate fi afișat înapoi utilizatorului. Dar, în ceea ce privește funcționalitatea noastră ajax, asta e tot ce există. Pentru mai multe opțiuni și setări, verificați documentația jQuery cu privire la funcția ajax. Exemplul de aici este una dintre cele mai simple implementări, dar chiar și așa, este foarte puternic, după cum puteți vedea.
Să examinăm scurt partea din cod care afișează mesajul nostru înapoi utilizatorului, pentru a termina tutorialul.
În primul rând, schimbăm întregul conținut al divului contact_form div (amintiți-mi că am spus că vom avea nevoie de div) cu următoarea linie:
$ ( '# CONTACT_FORM'). Html (“„);
Ceea ce a făcut a fost înlocuit tot conținutul din div divorț de contact, folosind funcția hQml () a lui jQuery. Deci, în loc de o formă, acum avem doar un nou div interior, cu id de "mesaj". Apoi, vom umple acel div cu un mesaj real - o h2 spunând "Formular de contact trimis":
$ ( '# Mesaj'). Html (“Formular de contact trimis!
„)
Apoi vom adăuga și mai mult conținut la mesajul div cu funcția append () a lui jQuery și, în partea superioară, adăugăm un efect rece prin ascunderea mesajului div cu funcția jQuery hide (), apoi decolorăm tot cu fadeIn () funcţie:
.adăuga("Vom fi în legătură în curând.
") .hide () .fadeIn (1500, funcția () $ ('# message') append ("");); Deci, utilizatorul sfârșește prin a vedea următoarele după ce a trimis formularul:
Până acum, cred că va trebui să fiți de acord că este incredibil de ușor să trimiteți formulare fără reîmprospătarea paginii utilizând funcția ajax puternică a lui jQuery. Trebuie doar să obțineți valorile din fișierul javascript, să le procesați cu funcția ajax și să reveniți la fals și sunteți bine să mergeți. Puteți procesa valorile din scriptul dvs. php, la fel ca orice alt fișier php, singura diferență fiind aceea că utilizatorul nu trebuie să aștepte o reîmprospătare a paginii - totul se întâmplă în tăcere în fundal.
Deci, dacă aveți un formular de contact pe site-ul dvs. web, un formular de autentificare sau chiar mai multe forme avansate care procesează valori prin intermediul unei baze de date și recuperează rezultatele înapoi, puteți să o faceți cu ușurință și eficient și, cel mai important, să îmbunătățiți utilizatorul final experiență cu site-ul dvs. prin furnizarea de interactivitate fără a fi nevoie să așteptați ca pagina să se reîncarce.
Aș dori să adaug câteva cuvinte finale despre exemplul demo furnizat. În demonstrație, puteți observa că există, de fapt, un plugin folosit - fișierul runonload.js. Am stat de la începutul tutorialului că nu vom folosi niciun plugin și apoi veți găsi în demo un script de runonload suplimentar, deci este posibil să fie necesară o explicație! Pentru oricine vrea să vadă un demo de lucru live, puteți vizualiza formularul de consultanță pentru site-ul meu web.
Singura utilizare pe care am făcut-o cu runonload nu are nimic de-a face cu prelucrarea formularului. Deci, puteți realiza complet funcțiile ajax fără alte pluginuri. Am folosit doar runonload pentru a focaliza câmpul de introducere a numelui la încărcarea paginii. A fost experienta mea ca apelul runonload poate fi uneori un inlocuitor mai bun pentru functia gata de document a lui jQuery, si am gasit asta ca sa fiu cazul in timp ce pun acest tutorial. Din anumite motive, funcția focus () nu ar funcționa la încărcarea paginii utilizând funcția gata de document a lui jQuery - dar a funcționat cu runonload și de aceea îl găsiți ca parte a exemplului. Deci, dacă știți despre o modalitate de a realiza acest lucru fără a utiliza runonload, aș fi bucuros să vă aud de la dumneavoastră.
Am creat un ghid complet care vă ajută să învățați JavaScript, indiferent dacă începeți doar ca dezvoltator web sau doriți să explorați subiecte mai avansate.
