Kuidas kasutada AJAX-i veebivormi saatmiseks

Reklaam

Võib-olla olete lugenud meie jQuery juhend JQuery põhijuhend Javascripti programmeerijateleKui olete Javascripti programmeerija, aitab see JQuery juhend alustada kodeerimist nagu ninja. Loe rohkem , nagu ka meie viies osa jQuery juhendaja AJAX-is jQuery juhendaja (5. osa): AJAX kõik!JQuery minijuhendussarja lõpu lähedal on käes aeg uurida jQuery ühte kõige sagedamini kasutatavat funktsiooni. AJAX võimaldab veebisaidil suhelda ... Loe rohkem , kuid täna näitan teile, kuidas kasutada AJAX-i veebivormi dünaamiliseks saatmiseks. JQuery on AJAXi kasutamiseks siiani kõige lihtsam viis, nii et kontrollige meie juhendamise alustamine jQuery juhendaja - alustamine: põhitõed ja valijadEelmisel nädalal rääkisin sellest, kui oluline on jQuery iga kaasaegse veebiarendaja jaoks ja miks see on fantastiline. Sel nädalal arvan, et on aeg käes käsi mõne koodiga määrida ja saime teada, kuidas ... Loe rohkem kui olete algaja. Hüppame kohe sisse.

Miks kasutada AJAX-i?

Teil võib tekkida küsimus "Miks ma vajan AJAXi?" HTML on täiesti võimeline vorme esitama ja teeb seda üsna valutult. AJAX on rakendatud enamikus veebilehtedel ja selle populaarsus kasvab jätkuvalt.

Tohutu kasu, mida AJAX toob, on võime osaliselt koormama veebilehtede osad. See muudab lehed kiiremaks ja tundlikumaks ning säästab ribalaiust, kui peate terve lehe asemel laadima ainult väikese osa andmetest. Siin on mõned põhilised AJAX-i kasutamise juhtumid:

• Kontrollige regulaarselt uusi e-kirju.
• Uuendage live-jalgpalli tulemust iga 30 sekundi järel.
• Uuendage veebioksjoni hinda.

AJAX pakub teile, arendajale, peaaegu piiramatut võimalust teha veebilehti kiireks, reageerivaks ja lohakaks - mille eest külastajad teid tänavad.

HTML

Enne alustamist vajate HTML-vormi. Kui te ei tea, mis HTML on, lugege meie juhendit sellest kuidas luua veebisait algajatele Kuidas teha veebisaiti: algajateleTäna juhendan teid täieliku veebisaidi nullist valmistamise protsessis. Ärge muretsege, kui see kõlab raskelt. Ma juhendan teid sellest igal sammul. Loe rohkem .

Siin on vajalik HTML:

 Nimi: Vanus: 

See html määratleb väheste elementidega vormi. Pange tähele, kuidas seal on tegevus ja meetod atribuudid. Need määravad vormi esitamise koha ja viisi. Neid pole vaja, kui kasutate AJAX-i, kuid neid on hea mõte kasutada, kuna see tagab, et teie veebisaidi külastajad saavad seda ikkagi kasutada, kui neil on JavaScript keelatud. Sellel lehel on Google'i hostitud jQuery nende saidil CDN Mis on CDN-id ja miks ladustamine pole enam probleemCDN-id muudavad Interneti kiireks ja veebisaidid taskukohaseks ka miljonitele kasutajatele. Esiteks maksab ribalaius raha; need, kes on piiratud lepinguga, teavad seda liiga hästi. Mitte ainult teie ... Loe rohkem . pea sisaldab a skript silt - siin kirjutate oma koodi.

See vorm võib praegu tunduda pisut igav, nii et võiksite kaaluda CSS-i õppimine 5 beebi sammu CSS-i õppimiseks ja Kick-Ass CSS-i nõiaks saamiseksCSS on viimase kümne aasta jooksul kõige olulisemad muudatuste veebilehed, mis sillutasid teed stiili ja sisu eraldamiseks. Kaasaegsel viisil määratleb XHTML semantilise struktuuri ... Loe rohkem et seda natuke elavdada.

JavaScripti

JavaScripti abil vormide esitamiseks on mitu võimalust. Esimene ja lihtsaim viis selleks on Esita meetod:

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

Kui soovite, võite vormi loomulikult sihtida jQuery abil - see ei muuda midagi:

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

See käsk käsib teie brauseril vormi edastada, täpselt nagu nupu Saada vajutamine. See sihib vormi ID järgi ja sellisel juhul see on myForm. See pole AJAX, nii et laadib uuesti terve lehe - midagi, mis pole alati soovitav.

Aastal meetod oma vormi atribuudi, täpsustasite, kuidas vormi esitada. See võib nii olla POST või SAA. Seda atribuuti ei kasutata vormide esitamisel AJAX-i abil, kuid sama meetodit saab kasutada.

Suur osa kaasaegsest veebist on GET- või POST-taotluste ära jooksnud. Üldiselt kasutatakse andmete hankimiseks GET-i, andmete saatmiseks (ja vastuse tagastamiseks) POST-i. Andmeid saab saata GET-iga, kuid POST on peaaegu alati parem valik - eriti vormiandmete puhul. Võib-olla olete GET-taotlusi juba varem näinud - nad saadavad URL-ile lisatud andmed:

somewebsite.com/index.html? nimi = Joe

Küsimärk annab brauserile teada, et sellele vahetult järgnevaid andmeid ei tohi kasutada veebisaidil liikumiseks, vaid need tuleks selle töötlemiseks lehele edastada. See sobib hästi selliste lihtsate asjade jaoks nagu lehenumber, kuid sellel on mõned puudused:

Maksimaalne tähemärkide arv: URL-is saab saata maksimaalselt tähemärke. Võimalik, et teil pole piisavalt, kui proovite saata suurt hulka andmeid.
Nähtavus: Igaüks näeb GET-päringus saadetavaid andmeid - see ei ole hea tundlike andmete, näiteks paroolide või vormiandmete jaoks.

POST-päringud töötavad sarnaselt, ainult nad ei saada andmeid URL-is. See tähendab, et saata saab suuremat hulka andmeid (andmeid nimetatakse a kasulik koormus) ja andmete paljastamata jätmine tagab teatud turvalisuse. Andmetele on siiski hõlpsasti juurde pääseda, nii et uurige SSL-sertifikaat Mis on SSL-sertifikaat ja kas te seda vajate?Interneti-sirvimine võib olla hirmutav, kui tegemist on isikliku teabega. Loe rohkem kui soovite täielikku meelerahu.

Olenemata sellest, kas kasutatakse POSTi või GETi, saadetakse andmed sisse võti -> väärtus paarid. Ülaltoodud URL-is on võti nimi, ja väärtus on Joe.

Parem viis vormide esitamiseks on kasutamine Asünkroonne JavaScript ja XML (AJAX). JavaScript toetab AJAX-kõnesid, kuid nende kasutamine võib olla segane. JQuery rakendab neid samu meetodeid, kuid teeb seda hõlpsasti kasutataval viisil. Võite oma brauseril käitada GET- või POST-taotlust täita - pidage kinni sellest näitest POST, kuid GET-taotlusi täidetakse sarnaselt.

Siin on süntaks:

$ .post ('mõned / url', $ ('# myForm'). serialize ());

See kood teeb mitmeid asju. Esimene osa ($) annab brauserile teada, et soovite selle ülesande jaoks kasutada jQuery. Teises osas nimetatakse postitada meetod alates jQuery. Peate läbima kaks parameetrit; Esimene on URL, kuhu andmed saata, teine ​​on andmed. Võite (olenevalt URL-ist, millele soovite juurde pääseda), et teie brauserite sama päritolu julgeolekupoliitika võib siin sekkuda. Saate lubada päritoluüleste ressursside jagamine selle ümberlülitamiseks piisab sageli ka lihtsalt osutamisest URL-ile, mida hostitakse teie lehega samas domeenis.

Teine parameeter kutsub välja jQuery sarjastama meetod oma vormil. See meetod pääseb juurde kõigile teie vormi andmetele ja valmistab need ette edastamiseks - see seeriab need.

Ainult sellest koodist piisab vormi esitamiseks, kuid võite tegutseda pisut kummaliselt. Tasub uurida oma brauseri arendaja tööriistu, kuna need muudavad silumisvõrgu taotlused imelihtne.

Teise võimalusena Postiljon on suurepärane tasuta tööriist HTTP-taotluste testimiseks.

Kui soovite saata oma vormi AJAX-i abil, kui esitamisnuppu vajutatakse, on see sama lihtne. Oma koodi peate manustama Esita vormi sündmus. Siin on kood:

$ (document) .on ('esita', '# myForm', function () {$ .post ('mõned / url', $ ('# myForm'). serialiseeri ()); tagastama vale; });

See kood teeb mitmeid asju. Kui vorm on esitatud, tuleb teie brauser ja käivitab teie koodi kõigepealt. Seejärel edastab teie kood vormi andmed, kasutades AJAX-i. Viimane nõutav samm on algvormi esitamise takistamine - olete seda juba AJAX-iga teinud, nii et te ei soovi, et see korduks!

Kui soovite pärast AJAX-i lõppu täita mõnda muud toimingut (või võib-olla isegi tagastada olekusõnumi), peate kasutama helista tagasi. JQuery muudab need väga lihtsaks kasutamiseks - andke funktsioon lihtsalt järgmise parameetrina:

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

tulemus argument sisaldab kõiki andmeid, mille tagastab URL, kuhu andmed saadeti. Nendele andmetele saate hõlpsalt vastata:

if (tulemus == 'edu') {// tehke mõni ülesanne. } else {// tee mõni muu ülesanne. }

Nii see on selle postituse puhul. Loodetavasti on teil nüüd HTTP-päringutest ja AJAXi toimimisest vormi kontekstis kindel ülevaade.

Kas õppisite täna uusi trikke? Kuidas AJAX-i vormidega kasutada? Andke meile oma mõtetest kommentaarides allpool!

Pildikrediidid: vectorfusionart / Shutterstock