Kako uporabljati AJAX za pošiljanje spletnega obrazca

Oglas

Morda ste prebrali naše jQuery vodnik Osnovni vodnik za JQuery za programerje JavascriptČe ste programer Javascript, vam bo ta priročnik za JQuery pomagal začeti kodirati kot ninja. Preberi več , kot tudi del petega našega jQuery vadnica na AJAX Vadnica za jQuery (5. del): AJAX Them All!Ko se bližamo koncu naše mini tutorialne serije jQuery, je čas, da podrobneje pogledamo eno najbolj uporabljenih funkcij jQueryja. AJAX spletnemu mestu omogoča komunikacijo z ... Preberi več , danes pa vam bom pokazal, kako lahko z AJAX dinamično pošljete spletni obrazec. JQuery je daleč najlažji način uporabe AJAX-a, zato preverite naš vadnica za začetek Vadnica za jQuery - Uvod: Osnove in izbirnikiPrejšnji teden sem govoril o tem, kako pomemben je jQuery za vsakega sodobnega spletnega razvijalca in zakaj je super. Ta teden mislim, da je čas, da si umažemo roke z neko kodo in se naučimo, kako ... Preberi več če ste začetnik Skočimo noter.

Zakaj uporabljati AJAX

Morda se sprašujete "Zakaj potrebujem AJAX?" HTML je popolnoma sposoben oddati obrazce in to na dokaj neboleč način. AJAX se izvaja na veliki večini spletnih strani, njegova priljubljenost pa še naprej narašča.

Ogromna korist, ki jo AJAX prinaša, je zmožnost delno obremeniti deli spletnih strani. Zaradi tega so strani hitrejše in bolj odzivne, pasovna širina pa prihrani le tako, da morate namesto celotne strani naložiti manjši del podatkov. Tu je nekaj osnovnih primerov uporabe AJAX:

• Redno preverjajte nova e-poštna sporočila.
• Posodobite rezultat v živo na vsakih 30 sekund.
• Posodobite ceno za spletno dražbo.

AJAX vam, razvijalcu, zagotavlja skoraj neomejeno zmožnost, da postanejo spletne strani hitre, odzivne in hitre - nekaj, za kar se vam bodo obiskovalci zahvalili.

HTML

Preden začnete, potrebujete obrazec HTML. Če ne veste, kaj je HTML, preberite naš vodnik naprej kako narediti spletno stran za začetnike Kako narediti spletno mesto: za začetnikeDanes vas bom vodil skozi postopek izdelave popolne spletne strani iz nič. Brez skrbi, če se to sliši težko. Vodila vas bom skozi vse korake. Preberi več .

Tukaj je HTML, ki ga potrebujete:

 Ime: Starost: 

Ta html definira obrazec z nekaj elementi. Opazite, kako obstajajo ukrepanje in metoda lastnosti. Ti določajo, kje in kako se obrazec odda. Ko uporabljate AJAX, jih ne potrebujete, vendar je dobro, da jih uporabite, saj zagotavlja, da lahko obiskovalci vašega spletnega mesta še vedno uporabljajo, če je JavaScript onemogočen. Ta stran vključuje jQuery, ki ga gostuje Google CDN Kaj so CDN-ji in zakaj shranjevanje ni daljše vprašanjeCDN-ji omogočajo hiter dostop do interneta in spletna mesta, tudi če povečate na milijone uporabnikov. Prvič, pasovna širina stane denar; tisti od nas z omejenimi pogodbami to vemo preveč dobro. Ne samo, da ... Preberi več . The glava vsebuje a skripta oznaka - tu boste zapisali svojo kodo.

Ta obrazec je morda videti nekoliko dolgočasen, zato boste morda želeli razmisliti učenje CSS 5 otroških korakov do učenja CSS-a in postane Kick-Ass CSS čarovnikCSS je najpomembnejša sprememba spletnih strani v zadnjem desetletju in je utirala pot ločitvi sloga in vsebine. Na sodoben način XHTML definira semantično strukturo ... Preberi več da ga nekoliko poživi.

JavaScript

Obstaja več načinov za oddajo obrazcev z JavaScript. Prvi in ​​najlažji način za to je prek oddati metoda:

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

Če želite, lahko obrazec ciljno usmerite na jQuery - brez razlike:

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

Ta ukaz vašemu brskalniku sporoči, da pošlje obrazec, tako kot pritisnete gumb za oddajo. Oblika cilja na svoj id, v tem primeru pa na to myForm. To ni AJAX, zato bo naložil celotno stran - nekaj, kar ni vedno zaželeno.

V metoda atributa obrazca, določili ste, kako predložiti obrazec. To je lahko POST ali DOBI. Ta atribut se ne uporablja pri oddaji obrazcev z uporabo AJAX, vendar se lahko uporabi isti način.

Večji del sodobnega spleta je brez GET ali POST zahtev. GET se na splošno uporablja za pridobivanje podatkov, medtem ko se POST uporablja za pošiljanje podatkov (in vrnitev odgovora). Podatke lahko pošiljate z GET, vendar je POST skoraj vedno boljša izbira - zlasti za podatke obrazca. Morda ste že videli zahteve GET - pošljejo podatke, priložene URL-ju:

somewebsite.com/index.html? ime = Joe

Vprašalnik sporoča brskalniku, da se kakršni koli podatki, ki so takoj za njim, ne uporabljajo za premikanje po spletnem mestu, temveč ga je treba posredovati na stran, da se obdela. To je dobro za preproste stvari, kot je številka strani, vendar ima nekaj pomanjkljivosti:

Največja omejitev znakov: V URL-ju lahko pošljete največje število znakov. Morda vam ne bo dovolj, če poskušate poslati veliko količino podatkov.
Vidnost: Podatki, poslani v zahtevi GET, lahko vidijo vsi - za občutljive podatke, kot so gesla ali podatki obrazca, ni dobro.

Zahteve POST delujejo na podoben način, le da podatkov ne pošljejo v URL. To pomeni, da se lahko pošlje večja količina podatkov (podatki so znani kot obremenitev), nekaj varnosti pa je pridobljeno z izpostavljanjem podatkov. Do podatkov je še vedno enostavno dostopati, zato poglejte v SSL potrdilo Kaj je SSL potrdilo in ga potrebujete?Brskanje po internetu je lahko strašljivo, če gre za osebne podatke. Preberi več če želite popolni duševni mir.

Ne glede na to, ali se uporablja POST ali GET, se podatki pošljejo ključ -> vrednost pari. V zgornjem URL-ju je ključ ime, vrednost pa je Joe.

Boljši način za oddajo obrazcev je uporaba Asinhroni JavaScript in XML (AJAX). JavaScript podpira klice AJAX, vendar jih je lahko nejasno uporabljati. JQuery izvaja povsem enake metode, vendar to počne na enostaven način. Brskalniku lahko naročite, da izvede zahtevo GET ali POST - za ta primer se držite POST, vendar se zahteve GET izvajajo na podoben način.

Tu je sintaksa:

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

Ta koda naredi več stvari. Prvi del ($) vaš brskalnik sporoči, da želite za to nalogo uporabiti jQuery. Drugi del poziva k objava metoda iz jQuery. Morate prenesti v dveh parametrih; Prvi je naslov, v katerega bodo podatki poslani, drugi pa podatki. (Odvisno od naslova, do katerega želite dostopati) boste morda ugotovili, da so brskalniki isto poreklo Tu lahko posega varnostna politika. Lahko omogočite navzkrižna izmenjava virov da bi to zaobšli, je pa dovolj, da preprosto kažete na URL, ki je na isti domeni kot vaša stran.

Drugi parameter kliče jQuery serializirati metoda na obrazcu. Ta metoda dostopa do vseh podatkov iz vašega obrazca in jih pripravi za prenos - serializira jih.

Ta koda je dovolj, da pošljete obrazec, vendar se vam zdijo stvari nekoliko nenavadne. Dobro je raziskati orodja za razvijalce brskalnika, saj zaradi napak v omrežju zahtevne težave odpravljajo napake.

Lahko pa tudi Poštar je odlično brezplačno orodje za testiranje zahtev HTTP.

Če želite obrazec poslati z uporabo AJAX, ko pritisnete gumb za pošiljanje, je to tako enostavno. Kodo morate priložiti oddati dogodek obrazca. Tu je koda:

$ (document) .on ('submit', '# myForm', function () {$ .post ('some / url', $ ('# myForm'). serialize ()); vrniti napačno; });

Ta koda naredi več stvari. Ko je obrazec predložen, pride vaš brskalnik in najprej zažene vašo kodo. Vaša koda nato pošlje podatke obrazca z uporabo AJAX. Zadnji potreben korak je preprečiti predložitev izvirnega obrazca - to ste že storili z AJAX, zato ne želite, da se to ponovi!

Če želite opraviti kakšno drugo nalogo, ko AJAX konča (ali morda celo vrne sporočilo o stanju), morate uporabiti poklicati nazaj. JQuery omogoča zelo enostavno uporabo - preprosto prenesete funkcijo kot drug parameter, kot je ta:

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

The rezultat argument vsebuje vse podatke, ki jih vrne URL, ki so mu bili poslani. Na te podatke lahko enostavno odgovorite:

if (rezultat == 'uspeh') {// narediti neko nalogo. } else {// narediti še kakšno nalogo. }

To je to za to objavo. Upajmo, da zdaj dobro razumete zahteve HTTP in kako AJAX deluje v okviru obrazca.

Ste se danes naučili kakšnih novih trikov? Kako uporabljate AJAX z obrazci? Sporočite nam vaše misli v spodnjih komentarjih!

Slikovni krediti: vectorfusionart / Shutterstock