Ako používať AJAX na odoslanie webového formulára

Reklama

Možno ste si prečítali náš jQuery guide Základný sprievodca JQuery pre programátorov JavascriptAk ste programátor jazyka Javascript, tento sprievodca programom JQuery vám pomôže začať kódovať ako ninja. Čítaj viac , ako aj časť piata z našich jQuery tutorial na AJAX Výukový program jQuery (5. časť): AJAX Them All!Keď sa blížime ku koncu našej mini-tutoriálovej série jQuery, je načase, aby sme sa dôkladnejšie zaoberali jednou z najpoužívanejších funkcií jQuery. AJAX umožňuje webovej stránke komunikovať s ... Čítaj viac , ale dnes vám ukážem, ako používať AJAX na dynamické odosielanie webového formulára. JQuery je zďaleka najjednoduchší spôsob, ako používať AJAX, takže checkout our úvodná príručka Výukový program jQuery - Začíname: Základy a výberyMinulý týždeň som hovoril o tom, aké dôležité je jQuery pre každého moderného webového vývojára a prečo je to úžasné. Tento týždeň si myslím, že je čas, aby sme si zašpinili ruky nejakým kódom a zistili sme, ako ... Čítaj viac ak ste začiatočník. Poďme priamo do toho.

Prečo používať AJAX

Možno vás zaujíma otázka „Prečo potrebujem AJAX?“ HTML dokáže dokonale odosielať formuláre, a to celkom bezbolestne. AJAX je implementovaný na veľkej väčšine webových stránok a jeho popularita sa neustále zvyšuje.

Veľkou výhodou, ktorú AJAX prináša, je schopnosť čiastočne načítať časti webových stránok. Vďaka tomu sa stránky javia rýchlejšie a pohotovejšie a šetria šírku pásma tým, že namiesto celej stránky stačí znova načítať malú časť údajov. Tu je niekoľko základných príkladov použitia AJAX:

• Pravidelne kontrolujte nové e-maily.
• Aktualizujte živé futbalové skóre každých 30 sekúnd.
• Aktualizujte cenu online aukcie.

AJAX vám, vývojárovi, ponúka takmer neobmedzenú schopnosť zrýchliť, pohotovo reagovať a byť šikovný - webové stránky vám za to budú vaši návštevníci poďakovať.

HTML

Predtým, ako začnete, potrebujete HTML formulár. Ak neviete, čo je to HTML, prečítajte si nášho sprievodcu ako vytvoriť webovú stránku pre začiatočníkov Ako si vytvoriť web: pre začiatočníkovDnes vás budem sprevádzať procesom vytvorenia kompletnej webovej stránky od začiatku. Nerobte si starosti, ak to znie ťažké. Prevediem vás každým krokom. Čítaj viac .

Potrebujete HTML:

 Názov: Vek: 

Tento html definuje formulár s niekoľkými prvkami. Všimnite si, aké existujú akčné a metóda atribúty. Tieto určujú, kde a ako sa formulár podáva. Keď používate AJAX, nie sú potrebné, ale je dobré ich používať, pretože zaisťuje, že návštevníci vašich webových stránok ich môžu aj naďalej používať, ak majú zakázaný JavaScript. Táto stránka obsahuje jQuery hostené spoločnosťou Google na ich stránkach CDN Čo sú CDN a prečo nie je problém s ukladanímVďaka CDN je internet rýchly a webové stránky sú cenovo dostupné aj vtedy, keď ich prispôsobíte miliónom používateľov. Po prvé, šírka pásma stojí peniaze; tí z nás, ktorí majú obmedzené zmluvy, to vedia príliš dobre. Nielenže ... Čítaj viac . hlava obsahuje a skript značka - tu napíšete svoj kód.

Tento formulár môže teraz vyzerať trochu nudne, takže by ste ho mali zvážiť učenie CSS 5 detských krokov k učeniu CSS a stať sa čarodejníkom Kick-Ass CSSCSS je najdôležitejšou webovou stránkou zmien, ktorá sa zaznamenala za posledné desaťročie, a pripravila pôdu pre oddelenie štýlu a obsahu. XHTML definuje moderne sémantickú štruktúru ... Čítaj viac trochu oživiť.

JavaScript

Existuje niekoľko spôsobov, ako môžete odoslať formuláre pomocou JavaScriptu. Prvý a najjednoduchší spôsob, ako to dosiahnuť, je prostredníctvom internetu Predložiť metóda:

document.getElementById ( 'myForm') predkladá ().

Formulár môžete samozrejme zacieliť pomocou jQuery, ak uprednostňujete - nezáleží na tom:

. $ ( '# MyForm') predkladá ();

Tento príkaz povie vášmu prehliadaču, aby odoslal formulár, presne ako stlačenie tlačidla Odoslať. Zameriava sa na formu pomocou svojho id av takom prípade to je myForm. Toto nie je AJAX, takže načíta celú stránku - niečo, čo nie je vždy žiaduce.

V metóda V atribúte formulára ste zadali spôsob odoslania formulára. To môže byť POST alebo GET. Tento atribút sa nepoužíva pri odosielaní formulárov pomocou AJAX, ale môže sa použiť rovnaká metóda.

Väčšina moderného webu je vybavená požiadavkami GET alebo POST. Vo všeobecnosti sa GET používa na načítanie údajov, zatiaľ čo POST sa používa na odosielanie údajov (a vrátenie odpovede). Dáta je možné posielať pomocou GET, ale POST je takmer vždy lepšia voľba - najmä pre dáta formulára. Možno ste už videli žiadosti GET - odosielajú údaje pripojené k adrese URL:

somewebsite.com/index.html? name = Joe

Otazník hovorí prehliadaču, že akékoľvek údaje, ktoré ho bezprostredne nasledujú, sa nemajú použiť na prechádzanie webom, ale namiesto toho by sa mali na stránku odovzdať na spracovanie. Funguje to dobre pre jednoduché veci, ako je napríklad číslo stránky, má to však niektoré nevýhody:

Maximálny počet znakov: Adresa URL môže obsahovať najviac znakov. Ak sa snažíte odoslať veľké množstvo údajov, možno ich nemáte dosť.
viditeľnosť: Každý môže vidieť, že sa údaje odosielajú v žiadosti GET - to nie je dobré pre citlivé údaje, ako sú heslá alebo údaje formulárov.

Požiadavky POST fungujú podobným spôsobom, iba neposielajú údaje v adrese URL. To znamená, že je možné odoslať väčšie množstvo údajov (údaje sú známe ako užitočné zaťaženie) a určitá bezpečnosť sa získa nevystavením údajov. K údajom sa však dá stále ľahko pristupovať, takže sa pozrite do SSL certifikát Čo je to certifikát SSL a potrebujete ho?Ak sa jedná o osobné údaje, prehliadanie internetu môže byť desivé. Čítaj viac ak chcete absolútny pokoj.

Či už používate POST alebo GET, údaje sa odosielajú kľúč -> hodnota párov. Vo vyššie uvedenej adrese URL je kľúč názova hodnota je joe.

Lepší spôsob, ako odoslať formuláre, je použitie Asynchrónny JavaScript a XML (AJAX). JavaScript podporuje hovory AJAX, ale ich používanie môže byť mätúce. JQuery implementuje tieto presne rovnaké metódy, robí to však ľahko použiteľným spôsobom. Môžete dať svojmu prehliadaču pokyn, aby vykonal požiadavku GET alebo POST - v tomto príklade sa držte POST, ale požiadavky GET sa vykonávajú podobným spôsobom.

Tu je syntax:

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

Tento kód robí niekoľko vecí. Prvá časť ($) informuje prehliadač, že chcete na túto úlohu použiť jQuery. V druhej časti sa hovorí pošta metóda z jQuery. Musíte zadať dva parametre; Prvou je adresa URL na odoslanie údajov, zatiaľ čo druhá sú údaje. V závislosti od adresy URL, ku ktorej sa snažíte získať prístup, možno zistíte, že vaše prehliadače rovnakého pôvodu tu môže zasahovať bezpečnostná politika. Môžete povoliť spoločné zdieľanie zdrojov aby ste to obišli, stačí iba ukázať adresu URL hostenú v rovnakej doméne ako vaša stránka.

Druhý parameter volá jQuery serialize metóda vo formulári. Táto metóda pristupuje ku všetkým údajom z formulára a pripravuje ich na prenos - serializuje ich.

Tento kód sám osebe stačí na odoslanie formulára, ale zistíte, že veci fungujú trochu čudne. Je dobré preskúmať nástroje pre vývojárov vášho prehliadača, pretože vďaka nim je ladenie sieťových požiadaviek hračkou.

Alternatívne poštár je vynikajúci bezplatný nástroj na testovanie požiadaviek HTTP.

Ak chcete odoslať formulár pomocou AJAX po stlačení tlačidla odoslania, je to rovnako jednoduché. Musíte pripojiť svoj kód k Predložiť udalosť formulára. Tu je kód:

$ (document) .on ('submit', '# myForm', function () {$ .post ('some / url', $ ('# myForm'). serialize ()); návrat nepravdivý; });

Tento kód robí niekoľko vecí. Po odoslaní formulára váš prehliadač príde a najskôr spustí váš kód. Váš kód potom odošle údaje formulára pomocou AJAX. Posledným požadovaným krokom je zabránenie odoslaniu pôvodného formulára - ste to už urobili s AJAX, takže už nechcete, aby sa to opakovalo!

Ak chcete po dokončení AJAX vykonať nejakú inú úlohu (alebo dokonca vrátiť stavovú správu), musíte použiť zavolaj späť. JQuery ich veľmi ľahko používa - jednoducho odovzdajte funkciu ako ďalší parameter, ako je tento:

$ .post ('url', $ ('# myForm'). serialize (), function (result) {console.log (result); }

následok argument obsahuje všetky údaje vrátené webovou adresou, do ktorej boli údaje zaslané. Na tieto údaje môžete ľahko odpovedať:

if (result == '' success ') {// urobiť nejakú úlohu. } else {// urobiť nejakú inú úlohu. }

To je pre tento príspevok. Dúfajme, že teraz máte solídne znalosti o požiadavkách HTTP a o tom, ako AJAX funguje v kontexte formulára.

Naučili ste sa dnes nejaké nové triky? Ako používate AJAX s formulármi? Dajte nám vedieť vaše myšlienky v komentároch nižšie!

Kredity obrázkov: vectorfusionart / Shutterstock