În această lecție vi se va arăta cum să creați un formular de contact prin care să trimiteți un e-mail fără a actualiza pagina cu jQuery. Să începem.
Vă sfătuiesc să descărcați codul sursă al întregii lecții. Va exista un script php care implementează procesul de livrare a mesajelor.
Pe scurt, lecția este foarte utilă!
Pasul 1 - creați direct formularul HTML în sine
Să aruncăm o privire la codul nostru html. Începem cu formularul nostru de bază HTML:
Tendințe și abordări moderne în dezvoltarea web
Învățați algoritmul de creștere profesională rapidă de la zero în clădirea site-ului
S-ar putea să fi observat că am inclus formularul de contact div id, care acoperă întregul cod de formular. S-ar putea să observați, de asemenea, că am lăsat goale parametrii de acțiune și metodă. Acest lucru am făcut în mod special, pentru că despre acest lucru mai târziu avea grijă de jQuery.
Un alt lucru important. Nu uitați să includeți valoarea id în fiecare câmp de introducere (linia începe cu eticheta de intrare). Aceste valori id pentru scriptul jQuery vor fi căutate pentru procesarea formularului.
Am adăugat câteva stiluri CSS și o imagine de fundal în Photoshop pentru a obține acest formular:
Pasul 2 - începeți să adăugați jQuery
Următorul pas este să începeți să adăugați codul jQuery după părți. Voi presupune că B deja a descărcat jQuery.
Prima funcție (funcția ()) începe încărcarea evenimentelor imediat ce documentul html este gata. Dacă ați lucrat deja cu jQuery, atunci funcția este aceeași cu funcția document.ready. Prin cod, puteți înțelege că avem o funcție de a face clic pe un buton, cu numele clasei "button". Astfel, am obținut același efect ca și cum am adăugat funcția onClick a butonului de trimitere în câmpul de introducere al formularului nostru.
Pasul 3 - scrierea unui formular de verificare a intrărilor
În interiorul funcției noastre, care se încarcă când pagina este gata, adăugăm o oarecare validare a datelor introduse. Și primul lucru pe care îl vedeți este că se adaugă $ ('. Eroare'). Și acest lucru este necesar pentru a ascunde cele 3 etichete de etichete cu clasa "eroare". Vrem ca acestea să fie ascunse nu numai la prima încărcare a paginii, ci și atunci când apăsați "trimite", în cazul în care unul dintre mesaje a fost afișat utilizatorului mai devreme. Fiecare mesaj de eroare trebuie afișat numai atunci când sunt introduse date nevalide.
Verificarea primului câmp: dacă câmpul pentru nume a fost lăsat necompletat de către utilizator, vom afișa mesajul scris în eticheta de etichetă cu identificatorul name_error. Apoi punem accent pe câmpul de introducere a numelui, în cazul în care utilizatorul este confuz cu ceea ce trebuie făcut în continuare. (Cred că nu ar trebui să vă tulpați din greu când vine vorba de forma de utilizatori)
Îți explic cum funcționează acest lucru. În variabila "name" vom scrie valoarea introdusă în câmp cu identificatorul "name" - aceasta este doar o linie pe jQuary.
Apoi verificăm dacă câmpul este gol și dacă da, vom folosi metoda show () a lui jQuery pentru a afișa eticheta cu id "name_error".
Apoi vom întoarce focalizarea pe câmp cu identificatorul "name" și vom întoarce false pentru funcția respectivă.
Asigurați-vă că ați returnat false la sfârșitul acestui cod, altfel vor fi trimise valorile tuturor câmpurilor (ceea ce încalcă complet ideea acestei lecții). return false nu permite utilizatorului să trimită datele formularului până când toate câmpurile sunt completate.
Pasul 4 - procesul de trimitere a datelor din formular utilizând funcțiile Ajax ale jQuery
Acum, trecem, ca să spunem așa, în inima materialului nostru didactic - crearea unui meniu fără reîmprospătarea paginii, care trimite valori de formă utilizând script-urile php în fundal. Să aruncăm o privire mai întâi la întregul cod și apoi să vorbesc despre pașii luați separat. Adăugați acest cod în același document tutorial.js, chiar sub codul scris în paragraful de mai sus.
Avem multe de făcut aici! Să lăsăm mai întâi întregul cod în parte. Piecemeal în ea este mai ușor de înțeles. Mai întâi, vom crea un șir de valori. Conține valorile tuturor câmpurilor formularului pe care vrem să le trecem la scriptul care trimite mesajul.
Vă reamintesc că anterior am declarat variabila "name" și l-am setat ca valoare la ceea ce a fost introdus în câmp cu identificatorul "name".
Tendințe și abordări moderne în dezvoltarea web
Învățați algoritmul de creștere profesională rapidă de la zero în clădirea site-ului
Putem folosi din nou valoarea "nume", precum și valorile "e-mail" și "telefon", pentru a crea un șir de valori de dateString:
Acum du-te la funcția noastră principală - ajax. Toate acțiunile au loc aici, așa că acordăm o atenție deosebită.
Principalul lucru care se întâmplă în cod este acesta. Funcția ajax () evaluează valorile din linia noastră de dateString (data: dataString), cu un script php numit process.php (url: "bin / process.php") folosind metoda POST (tip: "POST"). Dacă scriptul funcționează cu succes, vom putea afișa mesajul utilizatorului despre succes și, în final, vom reveni, dacă pagina nu este actualizată. Asta e tot. Întregul proces este doar câteva linii!
Există lucruri mai avansate pe care le puteți face aici, în loc să trimiteți un e-mail și să primiți un mesaj despre succesul acțiunii. De exemplu, puteți să trimiteți valorile către o bază de date, să le procesați și apoi să le afișați înapoi utilizatorilor. Deci, dacă aveți un vot pe site, puteți procesa votul și afișa rezultatele pentru utilizator fără a actualiza întreaga pagină.
Să rezumăm ceea ce sa întâmplat în exemplul nostru, pentru a ne asigura că am acoperit cu toții. Am luat valorile noastre de la jQuery și le-am adăugat la șir, astfel:
Apoi am folosit funcția jQuery-ajax pentru a gestiona valorile din șirul de date string. Apoi, procesul se încheie cu succes și afișăm mesajul utilizatorului și returnăm false, dacă nu există nicio actualizare pe pagina noastră:
Pasul 5 - implementarea mesajului către utilizator după introducerea datelor în formular
Să aruncăm o privire rapidă asupra acelei părți a codului care implementează mesajul către utilizator.
Mai întâi, vom schimba întregul conținut al contact_form Div (amintiți-vă, am spus că vom avea nevoie de un div dat) cu următoarea linie:
Ce sa întâmplat? Am înlocuit întreaga div cu id = "contact_form" folosind funcția jQuery html (). Deci, în loc de formă, am primit un nou div cu id = 'message'. Apoi, puneți în acest mesaj div - va fi în eticheta h2 cu semnătura "Formular de contact trimis"
În continuare, adăugăm mai mult conținut divului nostru folosind funcția append () a lui jQuery, apoi ascundem întreaga div cu mesajul nostru folosind funcția jQuery hide () și aplicăm efectul de aspect rece folosind funcția fadeIn ().
În cele din urmă, ceea ce văd utilizatorul, după introducerea corectă a datelor în formular:
În această lecție dedicată trimiterii formularului fără reîncărcarea paginii, folosind AJAX și jQuery, este finalizată. Toate cele bune pentru tine!
Traducere și editare: Rog Victor și Andrei Bernatsky. Comanda de tip web.
Tendințe și abordări moderne în dezvoltarea web
Învățați algoritmul de creștere profesională rapidă de la zero în clădirea site-ului
Cele mai recente știri despre dezvoltarea IT și web pe canalul nostru de telegrame
Acum, vezi cursul de organizare a muncii dinamice cu formulare!
Articole similare
Trimiteți-le prietenilor: