Kako koristiti AJAX za slanje web obrasca

Oglas

Možda ste pročitali naše Vodič za jQuery Osnovni vodič za JQuery za programere JavascriptAko ste Javascript programer, ovaj će vam vodič za JQuery pomoći da započnete kodiranje poput nindže. Čitaj više , kao i dio pet naših jQuery tutorial na AJAX-u jQuery Tutorial (5. dio): AJAX Them All!Kako se bliži kraj naše mini tutorial serije jQuery, krajnje je vrijeme da detaljnije pogledamo jednu od najčešće korištenih značajki jQueryja. AJAX omogućava web mjestu da komunicira s ... Čitaj više , ali danas ću vam pokazati kako pomoću AJAX-a za dinamičko slanje web obrasca. JQuery je daleko najlakši način korištenja AJAX-a, stoga potražite naš početak rada na vodiču jQuery Tutorial - Prvi koraci: Osnove i izborniciProšli tjedan sam govorio o tome koliko je jQuery važan bilo kojem modernom web programeru i zašto je to fenomenalno. Ovaj tjedan mislim da je došlo vrijeme da se ruke umažemo nekim šifrom i naučimo kako ... Čitaj više ako ste početnik Uskočimo odmah unutra

Zašto koristiti AJAX

Možda se pitate "Zašto mi treba AJAX?" HTML savršeno može slati obrasce i to čini na prilično bezbolan način. AJAX se implementira na velikoj većini web stranica, a njegova popularnost i dalje raste.

Ogromna korist koju AJAX donosi je sposobnost da djelomično opterećenje dijelovi web stranica. Zbog toga se stranice pojavljuju brže i brže reagiraju, a štedi se širina pojasa samo što je potrebno ponovno učitati mali dio podataka umjesto cijele stranice. Evo nekoliko osnovnih slučajeva korištenja AJAX:

• Redovito provjeravajte nove e-poruke.
• Ažurirajte rezultat uživo na svakih 30 sekundi.
• Ažurirajte cijenu internetske aukcije.

AJAX pruža vama, programeru, gotovo neograničenu mogućnost brzih, brzih i brzih web stranica - nešto na čemu će vam se posjetitelji zahvaliti.

HTML

Prije nego što započnete, potreban vam je HTML obrazac. Ako ne znate što je HTML, pročitajte naš vodič na kako napraviti web stranicu za početnike Kako napraviti web stranicu: za početnikeDanas ću vas voditi kroz izradu kompletne web stranice ispočetka. Ne brinite ako ovo zvuči teško. Vodit ću vas kroz to na svakom koraku. Čitaj više .

Evo HTML-a koji vam je potreban:

 Ime: Dob: 

Ovaj html definira obrazac s nekoliko elemenata. Primijetite kako postoje radnja i način atributa. Oni određuju gdje se i kako se obrazac podnosi. Oni nisu potrebni kada koristite AJAX, ali je dobra ideja da ih upotrebljavate jer osiguravate da posjetitelji vaše web stranice i dalje mogu koristiti ako su onemogućeni JavaScript. Ova stranica uključuje jQuery na kojem je domaćin Google CDN Što su CDN-ovi i zašto pohranjivanje više nije problemCDN-ovi čine Internet brzim i web-lokacijama pristupačnijima čak i kad dosegnete milijune korisnika. Prvo, propusnost košta novac; oni od nas na ograničenim ugovorima to previše dobro znaju. Ne samo da ... Čitaj više . glava sadrži a skripta tag - ovo je mjesto gdje ćete napisati svoj kôd.

Ovaj obrazac možda izgleda malo dosadno, pa biste mogli razmotriti učenje CSS-a 5 bebi koraka za učenje CSS-a i postati Kick-Ass CSS čarobnjakCSS je najvažnija promjena web stranica u posljednjem desetljeću, a utro je put za razdvajanje stila i sadržaja. Na moderni način XHTML definira semantičku strukturu ... Čitaj više da ga malo oživimo.

JavaScript

Nekoliko je načina na koje možete slati obrasce pomoću JavaScripta. Prvi i najlakši način za to je putem podnijeti metoda:

document.getElementById ( 'myForm') podnosi ().

Naravno, ako želite, obrazac možete ciljati putem jQuerya - nema razlike:

. $ ( '# MyForm') podnosi ();

Ova naredba poručuje vašem pregledniku da pošalje obrazac, baš kao i da pritisnete gumb za slanje. Cilja formu prema svom id-u, a u ovom slučaju to je to myForm. Ovo nije AJAX, pa će se ponovno učitati cijela stranica - nešto što nije uvijek poželjno.

U način atributa obrasca, odredili ste kako trebate dostaviti obrazac. Ovo može biti POST ili DOBITI. Ovaj se atribut ne koristi prilikom slanja obrazaca pomoću AJAX-a, ali može se upotrijebiti ista metoda.

Većina modernog weba pokreće GET ili POST zahtjeve. Općenito govoreći, GET se koristi za dohvaćanje podataka, dok se POST koristi za slanje podataka (i vraćanje odgovora). Podaci se mogu slati putem GET-a, ali POST je gotovo uvijek bolji izbor - posebno za podatke obrasca. Možda ste već vidjeli GET zahtjeve - šalju podatke u prilogu URL-u:

somewebsite.com/index.html? name = Joe

Upitni znak govori pregledniku da se bilo koji podaci odmah nakon njega ne smiju koristiti za prelazak na web mjestu, već ih treba prenijeti na stranicu da bi se mogli obraditi. Ovo dobro uspijeva za jednostavne stvari poput broja stranice, ali ima neke nedostatke:

Maksimalno ograničenje znakova: Postoji najveći broj znakova koji se mogu poslati u URL-u. Možda vam nije dovoljno ako pokušavate poslati veliku količinu podataka.
Vidljivost: Svi mogu vidjeti podatke koji se šalju u GET zahtjevu - nije dobro za osjetljive podatke, poput lozinki ili podataka obrasca.

POST zahtjevi funkcioniraju na sličan način, samo što oni ne šalju podatke u URL. To znači da se može poslati veća količina podataka (podaci su poznati kao korisna nosivost), a određenu sigurnost dobiva se ne izlaganjem podataka. Ipak, podacima se i dalje lako može pristupiti, pa pogledajte u SSL certifikat Što je SSL certifikat, a treba li vam?Pregledavanje Interneta može biti zastrašujuće kada su u pitanju osobni podaci. Čitaj više ako želite potpuni duševni mir.

Bilo da se koristi POST ili GET, podaci se šalju ključ -> vrijednost para. U gornjem URL-u ključ je Ime, a vrijednost je Joe.

Bolji način za slanje obrazaca je upotreba Asinhroni JavaScript i XML (AJAX). JavaScript podržava AJAX pozive, ali mogu biti zbunjujući za upotrebu. JQuery primjenjuje te iste metode, ali to čini na jednostavan način korištenja. Možete uputiti preglednik da obavlja GET ili POST zahtjev - držite se POST-a za ovaj primjer, ali GET zahtjevi se izvode na sličan način.

Evo sintaksa:

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

Ovaj kod čini nekoliko stvari. Prvi dio ($) omogućuje vašem pregledniku da želite koristiti jQuery za ovaj zadatak. Drugi dio poziva na pošta metoda iz jQuery. Morate proći u dva parametra; Prvo je URL za slanje podataka, dok je drugi podatak. Možete pronaći (ovisno o URL-u kojem pokušavate pristupiti) da su preglednici istog podrijetla politika sigurnosti ovdje se može miješati. Možete to omogućiti dijeljenje resursa s više izvora da biste to zaobišli, ali jednostavno je dovoljno da pokaže URL koji se nalazi na istoj domeni kao i vaša stranica.

Drugi parametar zove jQuery emitovati u nastavcima metoda na vašem obrascu. Ovom metodom pristupaju se svim podacima iz vašeg obrasca i pripremaju ih za prijenos - serializiraju ih.

Ovaj je kôd dovoljan da pošaljete obrazac, ali može vam se činiti da stvari djeluju pomalo čudno. Vrijedno je istražiti alate za razvojne programere preglednika, jer zbog toga zahtjev za uklanjanje pogrešaka lagano puše.

Alternativno, Poštar izvrstan je besplatni alat za testiranje HTTP zahtjeva.

Ako želite poslati obrazac pomoću AJAX kada se pritisne gumb za slanje, to je jednako jednostavno. Morate priložiti svoj kôd na podnijeti događaj forme. Evo koda:

$ (document) .on ('submit', '# myForm', function () {$ .post ('some / url', $ ('# myForm'). serialize ()); vratiti lažno; });

Ovaj kod čini nekoliko stvari. Kad se preda obrazac, dolazi vaš preglednik i prvo pokreće vaš kôd. Vaš kôd tada šalje podatke obrasca pomoću AJAX-a. Posljednji potreban korak je sprječavanje slanja originalnog obrasca - to ste već učinili s AJAX-om, pa ne želite da se to više ponovi!

Ako želite izvršiti neki drugi zadatak nakon što AJAX završi (ili možda čak vrati poruku o statusu), morate upotrijebiti uzvratiti poziv. JQuery ovo čini vrlo jednostavnim za korištenje - jednostavno prenesite funkciju kao drugi parametar poput ovog:

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

proizlaziti argument sadrži sve podatke vraćene putem URL-a kojem su podaci poslani. Na ove podatke lako možete odgovoriti:

ako (rezultat == 'uspjeh') {// napraviti neki zadatak. } else {// obaviti neki drugi zadatak. }

To je to za ovaj post. Nadamo se da sada dobro razumijete HTTP zahtjeve i kako AJAX djeluje u kontekstu obrasca.

Jeste li danas naučili neke nove trikove? Kako koristite AJAX s obrascima? Javite nam svoje misli u komentarima u nastavku!

Slikovni krediti: vectorfusionart / Shutterstock