Az AJAX használata webes űrlap küldésére

Hirdetés

Lehet, hogy elolvasta a jQuery útmutató Alapvető útmutató a JQuery számára a Javascript programozók számáraHa Ön Javascript programozó, akkor a JQuery útmutatója segít elkezdeni a kódolást, mint egy ninja. Olvass tovább , valamint a mi ötödik részünk jQuery bemutató az AJAX-on jQuery bemutató (5. rész): Mindegyik AJAX!Mivel közeledik a jQuery mini-bemutató sorozatunk vége, itt az ideje, hogy mélyebben áttekintsük a jQuery egyik leggyakrabban használt funkcióját. Az AJAX lehetővé teszi egy weboldal számára, hogy kommunikáljon ... Olvass tovább , de ma megmutatom, hogyan lehet az AJAX használatával dinamikusan elküldeni egy webes űrlapot. A JQuery messze a legegyszerűbb módja az AJAX használatának, tehát ellenőrizze a mi kezdő oktatóprogram jQuery bemutató - Az első lépések: Alapok és választókA múlt héten arról beszélt, hogy mennyire fontos a jQuery minden modern webes fejlesztő számára, és miért fantasztikus. Ezen a héten azt hiszem, itt az ideje, hogy megtisztítsuk kezünket valamilyen kóddal, és megtanuljuk, hogyan ... Olvass tovább ha kezdő vagy. Most ugorjunk be.

Miért használja az AJAX-t?

Lehet, hogy azon kíváncsi, hogy „miért van szükségem az AJAX-re?” A HTML tökéletesen képes űrlapok benyújtására, és meglehetősen fájdalommentes módon. Az AJAX a weboldalak nagy többségében valósul meg, népszerűsége folyamatosan növekszik.

Az AJAX hatalmas előnye, hogy képes részlegesen betöltve weboldalak részei. Ezáltal az oldalak gyorsabban és jobban reagálnak, és sávszélességet takarít meg azáltal, hogy csak az adatok egy kis részét kell újratölteni az egész oldal helyett. Íme néhány alapvető AJAX használati eset:

• Rendszeresen keressen új e-maileket.
• Frissítse az élő labdarúgó-eredményt 30 másodpercenként.
• Frissítse az online aukció árát.

Az AJAX szinte korlátlan képességet nyújt Önnek, a fejlesztőnek, hogy weboldalakat gyorsan, rugalmasan és gyorsan készítsen - amiért a látogatók köszönnek.

A HTML

Mielőtt elkezdené, szükség van egy HTML űrlapra. Ha nem tudja, mi a HTML, akkor olvassa el az útmutatónkat hogyan lehet weboldalt készíteni kezdőknek Hogyan készítsünk egy weboldalt: kezdőknekMa végigvezeti Önt a teljes weboldal elkészítésének folyamatában. Ne aggódjon, ha ez nehéznek hangzik. Minden lépésnél végigvezeti Önt. Olvass tovább .

Itt van a szükséges HTML:

 Név: Kor: 

Ez a html néhány űrlapot határoz meg. Figyelje meg, hogy vannak akció és eljárás attribútumok. Ezek meghatározzák, hogy hol és hogyan kell benyújtani az űrlapot. Nincs szükségük az AJAX használatakor, de érdemes ezeket használni, mivel ez biztosítja, hogy webhelyének látogatói továbbra is használhassák azt, ha le van tiltva a JavaScript. Ezen az oldalon található a jQuery, amelyet a Google üzemeltet CDN Mik a CDN-k és miért nem többé a tárolás?A CDN-k gyorsabbá teszik az internetet és a weboldalakat, még akkor is, ha több millió felhasználóra méretezik őket. Először is, a sávszélesség pénzbe kerül; azok, akik korlátozott szerződéssel rendelkeznek, ezt túl jól tudják. Nem csak te ... Olvass tovább . Az fej tartalmaz egy forgatókönyv tag - itt írja be a kódját.

Ez az űrlap jelenleg kissé unalmasnak tűnhet, ezért érdemes megfontolni CSS tanulás 5 csecsemő lépés a CSS elsajátításában és a Kick-Ass CSS varázslóvá válásbanA CSS az egyetlen legfontosabb változási weboldal, amelyet az elmúlt évtizedben láttak, és előkészítette az utat a stílus és a tartalom szétválasztása érdekében. Az XHTML modern módon határozza meg a szemantikai struktúrát ... Olvass tovább egy kicsit felélénkülni.

A JavaScript

Számos módon lehet űrlapokat beküldeni a JavaScript segítségével. Ennek az első és legegyszerűbb módja a Beküldés eljárás:

document.getElementById ( 'myForm'). benyújtására ();

Természetesen megcélozhatja az űrlapot a jQuery segítségével, ha kedveled - nincs különbsége:

$ ( '# MyForm'). Benyújtására ();

Ez a parancs utasítja a böngészőt, hogy küldje el az űrlapot, ugyanúgy, mint a benyújtás gomb megnyomása. Az űrlapot azonosítója szerint célozza, és ebben az esetben ez az myForm. Ez nem AJAX, tehát újratölti az egész oldalt - olyasmit, ami nem mindig kívánatos.

Ban,-ben eljárás Az űrlap attribútumában megadta, hogyan kell benyújtania az űrlapot. Ez lehet POST vagy KAP. Ezt az attribútumot nem használják űrlapok AJAX használatával történő benyújtásakor, de ugyanaz a módszer is használható.

A modern web nagy része elfogy a GET vagy POST kérésekkel. Általánosságban elmondható, hogy a GET adatgyűjtésre szolgál, míg a POST az adatok küldésére (és a válasz visszaadására) szolgál. Az adatokat el lehet küldeni a GET segítségével, de szinte mindig a POST a jobb választás - különösen az űrlapadatok esetében. Lehet, hogy már látta a GET kéréseket - az URL-hez csatolt adatokat küldik el:

somewebsite.com/index.html? name = Joe

A kérdőjel azt jelzi a böngészőnek, hogy az azt közvetlenül követő adatokat nem a weboldalon való áthaladáshoz kell felhasználni, hanem tovább kell továbbítani az oldalra annak feldolgozása céljából. Ez jól működik az egyszerű dolgoknál, például az oldalszámnál, de van néhány hátránya:

Karakter maximális száma: Az URL-ben legfeljebb karakterek küldhetők. Lehet, hogy nem elég, ha nagy mennyiségű adatot próbál küldeni.
Láthatóság: Bárki láthatja az elküldött adatokat a GET kérésben - ez nem jó olyan érzékeny adatokhoz, mint például jelszavak vagy űrlapadatok.

A POST kérések hasonló módon működnek, csak nem küldik el az adatokat az URL-ben. Ez azt jelenti, hogy nagyobb mennyiségű adat küldhető el (az adatok a hasznos teher), és némi biztonságot nyer, ha nem tárja fel az adatokat. Az adatok továbbra is könnyen hozzáférhetők, tehát nézzen meg egy SSL tanúsítvány Mi az SSL tanúsítvány, és szüksége van rá?Az internet böngészése félelmetes lehet, ha személyes adatok vannak benne. Olvass tovább ha teljes nyugalmat akar.

Függetlenül attól, hogy a POST vagy a GET használatban van, az adatok be lesznek küldve kulcs -> érték párok. A fenti URL-ben a kulcs a név, és az érték Joe.

Az űrlapok benyújtásának jobb módja a felhasználás Aszinkron JavaScript és XML (AJAX). A JavaScript támogatja az AJAX hívásokat, ám ezek zavaróak lehetnek. A JQuery pontosan ugyanazokat a módszereket valósítja meg, de könnyen kezelhető módon. Utasíthatja böngészőjét GET vagy POST kérés végrehajtására - tartsa be a POST példányt ebben a példában, de a GET kéréseket hasonló módon hajtják végre.

Itt van a szintaxis:

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

Ez a kód több dolgot csinál. Az első rész ($) tudatja böngészőjével, hogy a jQuery-t szeretné használni ehhez a feladathoz. A második rész a posta módszer a jQuery-től. Két paramétert kell átadnia; Az első az adatok küldésének URL-je, míg a második az adatok. Előfordulhat, hogy (a hozzáférni kívánt URL-től függően) a böngészők same-origin a biztonsági politika itt zavarhatja. Engedélyezheti származásközi források megosztása hogy megkerülje ezt, elég gyakran elég az is, ha egy oldalra ugyanabban a domainben tárolt URL-re mutat.

A második paraméter meghívja a jQuery-t serialize módszer az űrlapon. Ez a módszer hozzáfér az adatokhoz az űrlapból, és felkészíti őket az átvitelre - sorosítja őket.

Ez a kód önmagában elegendő egy űrlap benyújtásához, de előfordulhat, hogy a dolgok kissé furcsa módon működnek. Érdemes megvizsgálni a böngésző fejlesztői eszközeit, mivel ezek megkönnyítik a hálózati hibakeresést.

Egy másik változat szerint Postás kiváló ingyenes eszköz a HTTP kérések teszteléséhez.

Ugyanolyan egyszerű, ha az AJAX segítségével el szeretné küldeni az űrlapot, amikor megnyomja a beküldés gombot. A kódot csatolnia kell a Beküldés az űrlap eseménye. Íme a kód:

$ (document) .on ('beküldés', '# myForm', function () {$ .post ('some / url', $ ('# myForm'). serialize ()); hamis visszaadást; });

Ez a kód több dolgot csinál. Az űrlap benyújtásakor a böngésző jön, és először futtatja a kódot. A kód ezután elküldi az űrlapadatokat az AJAX használatával. Az utolsó lépés az eredeti űrlap benyújtásának megakadályozása - ezt már megtetted az AJAX-szel, így nem akarja, hogy az megismétlődik!

Ha más feladatot szeretne végrehajtani, miután az AJAX befejeződött (vagy esetleg még állapotüzenetet küld vissza), akkor használnia kell egy visszahív. A JQuery megkönnyíti a használatot - egyszerűen adja át a függvényt egy másik paraméterként, mint ez:

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

Az eredmény argumentum tartalmazza azokat az adatokat, amelyeket az URL küldött vissza az URL-hez. Könnyedén válaszolhat ezekre az adatokra:

if (eredmény == 'siker') {// végezzen valamilyen feladatot. } else {// végezzen más feladatot. }

Ez erre a posztra. Remélhetőleg most már jól megérti a HTTP kéréseket és az AJAX működését az űrlap összefüggésében.

Megtanultál új trükköket ma? Hogyan használja az AJAX-et az űrlapokkal? Tudassa velünk gondolatait az alábbi megjegyzésekben!

Kép-hitelek: vectorfusionart / Shutterstock