Jak používat AJAX k odeslání webového formuláře

reklama

Možná jste si přečetli náš jQuery průvodce Základní průvodce JQuery pro programátory JavascriptPokud jste programátorem Javascriptu, tento průvodce JQuery vám pomůže začít kódovat jako ninja. Přečtěte si více , stejně jako část pět našich Výukový program jQuery na AJAX Výukový program jQuery (část 5): AJAX Them All!Když se blížíme ke konci naší mini-tutoriálové série jQuery, je na čase, abychom se hlouběji podívali na jednu z nejpoužívanějších funkcí jQuery. AJAX umožňuje webové stránce komunikovat s ... Přečtěte si více , ale dnes vám ukážu, jak používat AJAX k dynamickému odesílání webového formuláře. JQuery je zdaleka nejjednodušší způsob, jak používat AJAX, takže checkout naše jak začít tutoriál Výukový program jQuery - Začínáme: Základy a výběrMinulý týden jsem mluvil o tom, jak důležité je jQuery pro každého moderního webového vývojáře a proč je to úžasné. Tento týden si myslím, že je čas, abychom si zašpinili ruce nějakým kódem a zjistili, jak ... Přečtěte si více pokud jste začátečník. Pojďme přímo dovnitř.

Proč používat AJAX

Možná vás zajímá, proč potřebuji AJAX? HTML je dokonale schopné odesílat formuláře, a to docela bezbolestně. AJAX je implementován na velké většině webových stránek a jeho popularita stále roste.

Obrovskou výhodou, kterou AJAX přináší, je schopnost částečně načíst části webových stránek. To způsobí, že se stránky budou jevit rychleji a lépe reagují a šetří šířku pásma tím, že místo celé stránky budou muset znovu načíst jen malou část dat. Zde jsou některé základní případy použití AJAX:

• Pravidelně kontrolujte nové e-maily.
• Aktualizujte živé fotbalové skóre každých 30 sekund.
• Aktualizujte cenu online aukce.

AJAX vám, vývojáři, nabízí téměř neomezenou schopnost rychle a pohotově reagovat na webové stránky a být úhledný - něco, za co vám vaši návštěvníci děkují.

HTML

Než začnete, potřebujete HTML formulář. Pokud nevíte, co je to HTML, přečtěte si našeho průvodce jak vytvořit web pro začátečníky Jak si vyrobit web: pro začátečníkyDnes vás budu provázet procesem vytváření kompletního webu od nuly. Nebojte se, pokud to zní obtížně. Provedu vás tímto krokem na každém kroku. Přečtěte si více .

Zde je kód HTML, který potřebujete:

 Název: Stáří: 

Tento html definuje formulář s několika prvky. Všimněte si, jak jsou akce a metoda atributy. Ty určují, kde a jak je formulář odeslán. Pokud používáte AJAX, nejsou potřeba, ale je dobré je používat, protože zajišťuje, že návštěvníci vašeho webu jej mohou i nadále používat, pokud mají zakázaný JavaScript. Tato stránka obsahuje jQuery hostované společností Google na jejich CDN Co jsou CDN a proč úložiště již není problémDíky CDN je internet rychlý a webové stránky jsou cenově dostupné, i když je škálováte na miliony uživatelů. Za prvé, šířka pásma stojí peníze; ti z nás, kteří mají uzavřené smlouvy, to vědí příliš dobře. Nejen, že ... Přečtěte si více . hlava obsahuje a skript tag - zde napíšete svůj kód.

Tento formulář může teď vypadat trochu nudně, takže možná budete chtít zvážit učení CSS 5 dětských kroků k učení CSS a stát se Kick-Ass CSS kouzelníkemCSS je jedna z nejdůležitějších změn, které webové stránky zaznamenaly v posledním desetiletí, a vydláždila cestu pro oddělení stylu a obsahu. XHTML moderně definuje sémantickou strukturu ... Přečtěte si více abych to trochu oživil.

JavaScript

Existuje několik způsobů, jak můžete odesílat formuláře pomocí JavaScriptu. První a nejjednodušší způsob, jak toho dosáhnout, je prostřednictvím internetu Předložit metoda:

document.getElementById ('myForm'). submit ();

Formulář můžete samozřejmě cílit pomocí jQuery, pokud dáváte přednost - nezáleží na tom:

$ ('# myForm'). submit ();

Tento příkaz řekne prohlížeči, aby formulář odeslal, přesně jako stisknutí tlačítka Odeslat. Zaměřuje formu pomocí svého id, a v tomto případě to je myForm. Toto není AJAX, takže načte celou stránku - něco, co není vždy žádoucí.

V metoda atribut formuláře, jste určili, jak formulář odeslat. To může být POŠTA nebo DOSTAT. Tento atribut se nepoužívá při odesílání formulářů pomocí AJAX, ale lze použít stejnou metodu.

Většina moderního webu je vybavena požadavky GET nebo POST. Obecně se GET používá k načítání dat, zatímco POST se používá k odesílání dat (a vrácení odpovědi). Data lze odesílat pomocí GET, ale POST je téměř vždy lepší volbou - zejména pro data formuláře. Možná jste již viděli žádosti GET - odesílají data připojená k adrese URL:

somewebsite.com/index.html? jméno = Joe

Otazník říká prohlížeči, že jakákoli data, která jej bezprostředně následují, nemají být použita k procházení webu, ale místo toho by měla být předána na stránku, aby ji mohla zpracovat. Toto funguje dobře pro jednoduché věci, jako je číslo stránky, ale má to některé nevýhody:

Maximální počet znaků: V adrese URL může být odeslán maximální počet znaků. Nemusíte mít dost, pokud se pokoušíte odeslat velké množství dat.
Viditelnost: Každý může vidět, jak jsou data odesílána v požadavku GET - to není dobré pro citlivá data, jako jsou hesla nebo data formulářů.

POST požadavky fungují podobným způsobem, pouze neodesílají data v URL. To znamená, že lze odeslat větší množství dat (data se označují jako užitečné zatížení) a určitá bezpečnost je získána nevystavením dat. K datům však lze snadno přistupovat, takže se podívejte do SSL certifikát Co je to SSL certifikát a potřebujete jej?Prohlížení internetu může být děsivé, pokud se jedná o osobní údaje. Přečtěte si více pokud chcete naprostý klid mysli.

Ať už je použit POST nebo GET, data jsou odeslána klíč -> hodnota páry. Ve výše uvedené adrese URL je klíč názeva hodnota je Joe.

Lepší způsob podání formulářů je použití Asynchronní JavaScript a XML (AJAX). JavaScript podporuje volání AJAX, ale jejich použití může být matoucí. JQuery implementuje tyto přesně stejné metody, ale činí tak snadno použitelným způsobem. Můžete dát vašemu prohlížeči pokyn, aby provedl požadavek GET nebo POST - v tomto příkladu se držte POST, ale požadavky GET jsou prováděny podobným způsobem.

Zde je syntax:

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

Tento kód dělá několik věcí. První část ($) informuje prohlížeč, že chcete pro tuto úlohu použít jQuery. Druhá část se nazývá pošta metoda z jQuery. Musíte předat ve dvou parametrech; První je url, do kterého se data odesílají, zatímco druhá jsou data. Možná zjistíte (v závislosti na adrese URL, kterou se pokoušíte otevřít), že vaše prohlížeče stejný původ zde může zasahovat bezpečnostní politika. Můžete to povolit sdílení zdrojů napříč původem to obejít, ale stačí ukázat na adresu URL hostovanou ve stejné doméně jako vaše stránka.

Druhý parametr volá jQuery serializovat metoda ve formuláři. Tato metoda přistupuje ke všem datům z vašeho formuláře a připravuje je k přenosu - serializuje je.

Tento kód sám o sobě stačí k odeslání formuláře, ale možná zjistíte, že se věci chovají trochu podivně. Je dobré prozkoumat vývojové nástroje vašeho prohlížeče, protože díky tomu je ladění síťových požadavků hračkou.

Alternativně, Listonoš je vynikajícím bezplatným nástrojem pro testování požadavků HTTP.

Pokud chcete odeslat formulář pomocí AJAX po stisknutí tlačítka Odeslat, je to stejně snadné. Musíte připojit svůj kód k Předložit událost formuláře. Zde je kód:

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

Tento kód dělá několik věcí. Po odeslání formuláře přijde prohlížeč a nejprve spustí váš kód. Váš kód poté odešle data formuláře pomocí AJAX. Posledním požadovaným krokem je zabránění odeslání původního formuláře - již jste to udělali s AJAX, takže už nechcete, aby se to stalo znovu!

Pokud chcete po dokončení AJAX provést nějakou jinou úlohu (nebo dokonce vrátit stavovou zprávu), musíte použít zpětné volání. JQuery je velmi snadno používá - jednoduše předejte funkci jako další parametr, jako je tento:

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

výsledek argument obsahuje všechna data vrácená pomocí adresy URL, na kterou byla data odeslána. Na tato data můžete snadno reagovat:

if (result == '' success ') {// udělej nějaký úkol. } else {// dělat nějaký další úkol. }

To je pro tento příspěvek. Doufejme, že nyní máte solidní znalosti o požadavcích HTTP a o tom, jak AJAX pracuje v kontextu formuláře.

Naučili jste se dnes nějaké nové triky? Jak používáte AJAX s formuláři? Sdělte nám své myšlenky v komentářích níže!

Obrazové kredity: vectorfusionart / Shutterstock