Cum se utilizează AJAX pentru a trimite un formular web

Este posibil să fi citit ghidul nostru jQuery Un ghid de bază pentru JQuery pentru programatori Javascript Un ghid de bază pentru JQuery pentru programatori Javascript Dacă sunteți un programator Javascript, acest ghid pentru JQuery vă va ajuta să începeți codarea ca un ninja. Citiți mai multe, precum și partea a cincea a tutorialului nostru jQuery pe AJAX jQuery Tutorial (Partea 5): AJAX Them All! jQuery Tutorial (Partea 5): AJAX-le pe toate! Pe măsură ce ne apropiem de sfârșitul seriei mini-tutorial jQuery, este timpul să ne uităm la una dintre cele mai utilizate caracteristici ale jQuery. AJAX permite unui site să comunice cu ... Citește 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ă verificați tutorialul nostru de început jQuery Tutorial - Noțiuni de bază: Elementele de bază și selectorii JQuery Tutorial - Noțiuni de bază: Elementele de bază și selectorii Săptămâna trecută am vorbit despre cât de important este jQuery pentru orice dezvoltator web modern și de ce e minunat. Săptămâna asta, cred că este timpul să ne mâncăm mâinile cu un cod și să învățăm cum ... Citiți mai multe dacă sunteți începător. Să mergem imediat.

De ce folosiți AJAX

S-ar putea să te întrebi “De ce am nevoie de AJAX?” HTML este perfect capabil să prezinte forme și face acest lucru într-un mod destul de nedureros. AJAX este implementat într-o mare parte a paginilor web, iar popularitatea sa continuă să crească.

AJAX aduce imensa abilitate încărcare parțială părți ale paginilor web. Acest lucru face ca paginile să apară mai repede și mai receptive și salvează lățimea de bandă doar prin reîncărcarea unei mici porțiuni de date în loc de întreaga pagină. Iată câteva cazuri de utilizare AJAX de bază:

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

AJAX vă oferă dezvoltatorul, cu o abilitate aproape nelimitată de a face paginile web rapide, receptive și rapide - ceea ce vizitatorii dvs. vă vor mulțumi pentru.

HTML-ul

Înainte de a începe, aveți nevoie de un formular HTML. Dacă nu știți ce este HTML, citiți ghidul nostru despre cum să faceți un site pentru începători Cum să faceți un site web: Pentru începători Cum să faceți un site web: Pentru începători Azi vă voi îndruma prin procesul de realizare un site complet de la zero. Nu vă faceți griji dacă acest lucru pare dificil. Te voi îndruma în fiecare pas al drumului. Citeste mai mult .

Iată codul HTML de care aveți nevoie:

       
 Nume:  Vârstă:   
   

Acest html definește un formular cu câteva elemente. Observați cum există acțiune și metodă atribute. Acestea definesc locul și modul în care este prezentat formularul. Nu sunt necesare atunci când utilizați AJAX, dar este o idee bună să le folosiți, deoarece asigură faptul că vizitatorii site-ului dvs. Web îl pot utiliza în continuare dacă au JavaScript dezactivat. Această pagină include jQuery găzduită de Google pe CDN-ul lor Ce CDN-uri sunt și de ce spațiul de stocare nu mai este o problemă Ce CDN-uri sunt și de ce spațiul de stocare nu mai este o problemă CDN-urile fac internetul rapid și site-urile web accesibile chiar și atunci când scalați la milioane de utilizatori. În primul rând, lățimea de bandă costă bani; cei din noi pe contracte limitate știu prea bine. Nu numai că ... Citește mai mult. cap conține a scenariu etichetă - aici vă veți scrie codul.

Acest formular ar putea părea un pic plictisitor 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 Kick-Ass CSS Sorcerer 5 Pași pentru a învăța CSS și a deveni un Kick Ass CSS Sorcerer CSS este singurul cele mai importante pagini de schimbare pe care le-au văzut în ultimul deceniu, și au deschis calea pentru separarea stilului și a conținutului. În mod modern, XHTML definește structura semantică ... Citește mai mult pentru a-i face un pic de viață.

JavaScript

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

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

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

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

Această comandă indică browserului dvs. să trimită formularul, exact ca și apăsarea butonului de trimitere. Ea vizează forma prin idul său, și în acest caz, asta e 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 modul de trimitere a formularului. Acesta poate fi POST sau OBȚINE. Acest atribut nu este utilizat la trimiterea formularelor folosind AJAX, dar poate fi utilizată aceeași metodă.

O mare parte din web-ul modern este rupt de cereri GET sau POST. În general, GET este utilizat pentru a prelua date, în timp ce POST este folosit pentru a trimite date (și 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 înainte solicitări GET - acestea trimit datele atașate la adresa URL:

somewebsite.com/index.html?name=Joe

Semnul de întrebare indică browserului că orice date imediat ce urmează nu vor fi utilizate pentru a traversa site-ul Web, ci ar trebui să fie transmise pe pagină pentru ca acesta să poată fi procesat. Acest lucru funcționează bine pentru lucruri simple, cum ar fi un număr de pagină, dar are unele neajunsuri:

Limita maximă a caracterelor: Există un număr maxim de caractere care pot fi trimise într-o adresă URL. Este posibil să nu aveți suficienți 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 datele sensibile cum ar fi parolele sau datele formularului.

Solicitările POST lucrează într-un mod similar, numai că nu trimit datele în URL. Aceasta înseamnă că o cantitate mai mare de date pot fi trimise (datele sunt cunoscute sub numele de încărcătură utilă), iar o anumită securitate este obținută prin faptul că nu expuneți datele. Datele pot fi totuși ușor accesate, totuși, căutați un certificat SSL Ce este un certificat SSL și aveți nevoie de unul? 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. Citește mai mult dacă vrei pace totală a minții.

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

Cea mai bună modalitate de a trimite formulare este de a utiliza Asynchronous JavaScript și XML (AJAX). JavaScript acceptă apelurile AJAX, dar acestea pot fi confuze pentru utilizare. JQuery implementează aceleași metode identice, dar face acest lucru într-un mod ușor de utilizat. Puteți instrui browserul dvs. să efectueze o solicitare GET sau POST - rămâneți la POST pentru acest exemplu, dar solicitările GET sunt efectuate în mod similar.

Iată sintaxa:

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

Acest cod face mai multe lucruri. Prima parte ($) permite browserului dvs. să știe că doriți să utilizați jQuery pentru această sarcină. A doua parte cheamă post de la jQuery. Trebuie să treci în doi parametri; Primul este urlul pentru a trimite datele, în timp ce al doilea este datele. Puteți găsi (în funcție de adresa URL pe care încercați să o accesați) că browserul dvs. " aceeași origine politica de securitate poate interfera aici. Puteți să permiteți partajarea resurselor de origine încrucișată pentru a obține acest lucru, însă simpla îndreptare spre o adresă URL găzduită pe același domeniu ca și pagina dvs. este adesea suficientă.

Al doilea parametru numește jQuery serializa pe formularul dvs. Această metodă accesează toate datele din formular și le pregătește pentru transmisie - le serializează.

Numai acest cod este suficient pentru a trimite un formular, însă este posibil să constatați că lucrurile se comportă puțin ciudat. Este bine să investiga instrumentele dvs. de dezvoltator de browser, deoarece acestea fac cererile de depanare a rețelei o briză.

Alternativ, Postman este un instrument excelent gratuit pentru testarea cererilor HTTP.

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

$ (document) .on ('trimite', '# myForm', funcția () $ .post ('some / url', $ ('myForm').

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

Dacă doriți să efectuați o altă sarcină după terminarea AJAX-ului (sau poate chiar returnarea unui mesaj de stare), trebuie să utilizați suna inapoi. JQuery le face foarte usor de folosit - pur si simplu treaca o functie ca un alt parametru ca acesta:

$ .post ('url', $ ('# myForm')) serialize (), function (rezultat) console.log (rezultat);

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

dacă (rezultat == "succes") // face ceva sarcină altceva // face o altă sarcină 

Asta este pentru acest post. Sperăm că aveți acum o înțelegere solidă a cererilor HTTP și cum funcționează AJAX în contextul unui formular.

Ai învățat noi trucuri astăzi? Cum folosiți AJAX cu formulare? Anunțați-vă gândurile în comentariile de mai jos!

Credite de imagine: vectorfusionart / Shutterstock

Explorați mai multe despre: JavaScript, jQuery, Dezvoltare Web.