Cum se utilizează AJAX pentru a trimite un formular web

Publicitate

Poate ai citit-o pe a noastră Ghid de jQery Un ghid de bază pentru JQuery pentru programatori JavascriptDacă sunteți un programator Javascript, acest ghid pentru JQuery vă va ajuta să începeți codarea ca un ninja. Citeste mai mult , precum și partea a cincea a noastră jQuery tutorial pe AJAX jQuery Tutorial (partea a 5-a): AJAX Toți!Când ne apropiem de sfârșitul mini-tutorialului nostru jQuery, a venit momentul să aruncăm o privire mai aprofundată la una dintre cele mai utilizate caracteristici ale jQuery. AJAX permite unui site web să comunice cu ... Citeste mai mult , dar astăzi vă voi arăta cum să utilizați AJAX pentru a trimite dinamic un formular web. JQuery este, de departe, cel mai simplu mod de a utiliza AJAX, așa că puteți verifica începerea tutorialului jQuery Tutorial - Noțiuni introductive: Noțiuni de bază și selectoriSăptămâna trecută, am vorbit despre cât de important este jQuery pentru orice dezvoltator web modern și de ce este minunat. Săptămâna aceasta, cred că a venit timpul să ne murdărim cu niște coduri și am învățat cum ... Citeste mai mult

dacă ești începător. Să sărim direct.

De ce să folosiți AJAX

Vă veți întreba „De ce am nevoie de AJAX?” HTML este perfect capabil să trimită formulare și face acest lucru într-un mod destul de nedureros. AJAX este implementat într-o mare majoritate de pagini web, iar popularitatea sa continuă să crească.

Beneficiul uriaș pe care îl aduce AJAX este capacitatea de a sarcină parțială părți ale paginilor web. Acest lucru face ca paginile să pară mai rapide și mai responsive și economisește lățimea de bandă, doar nevoind să reîncărcați o porțiune mică de date în loc de întreaga pagină. Iată câteva cazuri de utilizare AJAX de bază:

• Verificați periodic e-mailuri noi.
• Actualizați un scor live de fotbal la fiecare 30 de secunde.
• Actualizați prețul pentru o licitație online.

AJAX vă oferă, dezvoltatorului, o capacitate aproape nelimitată de a face pagini web rapide, receptive și snappy - lucru pentru care vizitatorii dvs. vă vor mulțumi.

HTML

Înainte de a începe, aveți nevoie de un formular HTML. Dacă nu știți ce este HTML, atunci citiți ghidul nostru cum să faci un site web pentru începători Cum să creezi un site web: pentru începătoriAstăzi vă voi ghida în procesul de creare de la zero a unui site complet. Nu vă faceți griji dacă sună dificil. Te voi ghida prin ea la fiecare pas. Citeste mai mult .

Iată HTML-ul de care aveți nevoie:

 Nume: Vârstă: 

Acest html definește o formă cu câteva elemente. Observați cum sunt acțiune și metodă atribute. Acestea definesc unde și cum este trimis formularul. Nu sunt necesare atunci când utilizați AJAX, dar este o idee bună să le utilizați, deoarece vă asigură că vizitatorii site-ului dvs. web îl pot utiliza în continuare dacă au JavaScript dezactivat. Această pagină include jQuery găzduită de Google pe site-ul lor CDN Ce sunt CDN-urile și de ce stocarea nu mai este o problemăCDN-urile fac Internetul rapid și site-urile la prețuri accesibile chiar și atunci când faceți scară la milioane de utilizatori. În primul rând, lățimea de bandă costă bani; cei din contracte limitate știu că prea bine. Nu numai că ... Citeste mai mult . cap contine un scenariu tag - aici este locul în care îți vei scrie codul.

Această formă poate părea un pic plictisitoare chiar acum, așa că poate doriți să luați în considerare învățarea CSS 5 pași pentru a învăța CSS și a deveni un vrăjitor CSS Kick-AssCSS este cea mai importantă pagină web de schimbare cea mai importantă înregistrată în ultimul deceniu și a deschis calea pentru separarea stilului și conținutului. În mod modern, XHTML definește structura semantică ... Citeste mai mult pentru a-l amora un pic.

JavaScript

Există mai multe moduri prin care puteți trimite formulare cu JavaScript. Primul și cel mai simplu mod de a face acest lucru este prin intermediul Trimite metodă:

document.getElementById ( 'myform') să prezinte ().;

Desigur, puteți viza formularul cu jQuery, dacă preferați - nu are nicio diferență:

. $ ( '# Myform') să prezinte ();

Această comandă spune browserului dumneavoastră să trimită formularul, exact ca și apăsarea butonului de trimitere. Vizează formularul după ID-ul său, și în acest caz, acesta este myform. Acesta nu este AJAX, așa că va reîncărca întreaga pagină - ceva care nu este întotdeauna de dorit.

În metodă atributul formularului dvs., ați specificat cum să trimiteți formularul. Acesta poate fi POST sau OBȚINE. Acest atribut nu este utilizat la trimiterea formularelor folosind AJAX, dar se poate utiliza aceeași metodă.

O mare parte din web-ul modern este difuzat de solicitările GET sau POST. În general, GET este folosit pentru a prelua date, în timp ce POST este folosit pentru a trimite date (și pentru a returna un răspuns). Datele pot fi trimise cu GET, dar POST este aproape întotdeauna alegerea mai bună - în special pentru datele din formular. Este posibil să fi văzut solicitări GET înainte - acestea trimit datele atașate la adresa URL:

somewebsite.com/index.html? name = Joe

Semnul de întrebare spune browserului că toate datele care urmează imediat nu trebuie utilizate pentru a traversa site-ul, ci ar trebui în schimb să fie transmise către pagina pentru ca acesta să fie procesat. Acest lucru funcționează bine pentru lucruri simple precum un număr de pagină, dar are unele dezavantaje:

Limită maximă de caractere: Există un număr maxim de caractere care pot fi trimise într-un URL. Este posibil să nu aveți suficient dacă încercați să trimiteți o cantitate mare de date.
Vizibilitate: Oricine poate vedea datele trimise într-o solicitare GET - nu este bine pentru date sensibile, cum ar fi parole sau date de formular.

Solicitările POST funcționează într-un mod similar, numai că nu trimit datele în adresa URL. Aceasta înseamnă că se poate trimite o cantitate mai mare de date (datele sunt cunoscute sub numele de încărcătură utilă), iar o anumită securitate este obținută prin neexpunerea datelor. Cu toate acestea, datele pot fi accesate cu ușurință, așa că uitați-vă la un Certificat SSL Ce este un certificat SSL și aveți nevoie de unul?Navigarea pe Internet poate fi înfricoșătoare atunci când sunt implicate informații personale. Citeste mai mult dacă vrei liniște sufletească totală.

Indiferent dacă se utilizează POST sau GET, datele sunt trimise cheie -> valoare perechi. În adresa URL de mai sus, cheia este Nume, iar valoarea este Joe.

Modul mai bun de a trimite formulare este să folosești JavaScript asincron și XML (AJAX). JavaScript acceptă apelurile AJAX, dar pot fi confuze pentru a le utiliza. JQuery pune în aplicare aceste aceleași metode, dar face acest lucru într-un mod ușor de utilizat. Puteți instrui browserul dvs. să efectueze o solicitare GET sau POST - să se lipească de POST pentru acest exemplu, dar cererile GET sunt efectuate într-un mod similar.

Iată sintaxa:

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

Acest cod face mai multe lucruri. Prima parte ($) vă permite browserului să știe că doriți să utilizați jQuery pentru această sarcină. A doua parte apelează la post metoda din jQuery. Trebuie să treceți în doi parametri; Primul este URL-ul pentru a trimite datele la, în timp ce al doilea este datele. Puteți afla (în funcție de adresa URL pe care încercați să o accesați), că browserele dvs. aceeași origine politica de securitate poate interfera aici. Puteți activa distribuirea resurselor încrucișate pentru a încerca acest lucru, dar pur și simplu indicând o adresă URL găzduită pe același domeniu ca pagina dvs. este destul de des.

Al doilea parametru apelează jQuery serializare metoda din formularul dvs. Această metodă accesează toate datele din formularul dvs. și le pregătește pentru transmitere - le serializează.

Numai acest cod este suficient pentru a trimite un formular, dar este posibil să descoperiți că lucrurile acționează un pic ciudat. Merită să investigați instrumentele pentru dezvoltatorii browserului, deoarece acestea fac ca rețeaua de depanare să solicite o briză.

Alternativ, Poştaş este un instrument gratuit excelent pentru testarea solicitărilor HTTP.

Dacă doriți să trimiteți formularul cu AJAX când apăsați butonul de trimitere, este la fel de ușor. Trebuie să atașați codul dvs. la Trimite eveniment al formei. Iată codul:

$ (document) .on ('trimite', '# myForm', function () {$ .post ('some / url', $ ('# myForm'). serialize ()); returnare falsă; });

Acest cod face mai multe lucruri. Când formularul dvs. este trimis, browserul dvs. vine mai întâi și vă rulează codul. Codul dvs. trimite apoi datele formularului folosind AJAX. Ultimul pas necesar este să împiedicați trimiterea formularului original - ați făcut deja acest lucru cu AJAX, deci nu doriți să se întâmple din nou!

Dacă doriți să efectuați o altă sarcină după ce AJAX a terminat (sau poate chiar să returnați un mesaj de stare), trebuie să utilizați un suna inapoi. JQuery face ca acestea să fie foarte ușor de utilizat - treceți pur și simplu o funcție ca un alt parametru ca acesta:

$ .post ('url', $ ('# myForm'). serialize (), funcție (rezultat) {console.log (rezultat); }

rezultat argumentul conține toate datele returnate de url la care au fost trimise datele. Puteți răspunde cu ușurință la aceste date:

if (rezultat == 'succes') {// faceți o sarcină. } altfel {// faceți o altă sarcină. }

Acesta este pentru această postare. Sperăm că acum aveți o înțelegere solidă a cererilor HTTP și modul în care funcționează AJAX în contextul unui formular.

Ai învățat astăzi noi trucuri? Cum folosiți AJAX cu formularele? Spuneți-ne gândurile în comentariile de mai jos!

Credite imagine: vectorfusionart / Shutterstock