Kuinka käyttää AJAX: tä Web-lomakkeen lähettämiseen

Mainos

Olet ehkä lukenut jQuery-opas Perusopas JQueryyn Javascript-ohjelmoijilleJos olet Javascript-ohjelmoija, tämä JQuery-opas auttaa sinua aloittamaan koodauksen kuin ninja. Lue lisää , samoin kuin osa viidestä meidän jQuery-opetusohjelma AJAX: llä jQuery-opas (osa 5): AJAX he kaikki!Kun olemme lähellä jQuery-mini-opetusohjelmasarjamme loppua, on aika tutkia tarkemmin yhtä jQueryn käytetyimmistä ominaisuuksista. AJAX mahdollistaa verkkosivuston kommunikoida ... Lue lisää , mutta tänään näytän sinulle, kuinka voit käyttää AJAX: ää verkkosivun dynaamiseen lähettämiseen. JQuery on ylivoimaisesti helpoin tapa käyttää AJAX: ää, joten tarkista meidän aloitusopastus jQuery-opas - Aloittaminen: Perusteet ja valitsimetViime viikolla puhuin siitä, kuinka tärkeä jQuery on kaikille nykyaikaisille web-kehittäjille ja miksi se on mahtava. Tällä viikolla mielestäni on aika saada kädet likaantumaan jollain koodilla ja oppia kuinka ... Lue lisää jos olet aloittelija. Hyppäämme suoraan sisään.

Miksi käyttää AJAX: ää

Saatat ihmetellä: "Miksi tarvitsen AJAX: n?" HTML kykenee täydellisesti lähettämään lomakkeita, ja tekee sen melko kivuttomalla tavalla. AJAX on otettu käyttöön suurimmassa osassa verkkosivustoja, ja sen suosio kasvaa edelleen.

AJAX: n suuri hyöty on kyky lataa osittain verkkosivujen osat. Tämä tekee sivut näyttämään nopeammilta ja reagoivimmin, ja säästää kaistanleveyttä vain, että sinun on ladattava vain pieni osa tietoja koko sivun sijasta. Tässä on joitain AJAX-käyttötapauksia:

• Tarkista uusia sähköposteja säännöllisesti.
• Päivitä live-jalkapallotulos 30 sekunnin välein.
• Päivitä verkkohuutokaupan hinta.

AJAX tarjoaa sinulle, kehittäjälle, lähes rajattoman mahdollisuuden tehdä verkkosivuja nopeiksi, reagoiviksi ja nopeina - josta kävijät kiittävät sinua.

HTML

Tarvitset HTML-lomakkeen ennen aloittamista. Jos et tiedä mitä HTML on, lue sitten oppaamme kuinka luoda verkkosivusto aloittelijoille Kuinka luoda verkkosivusto: AloittelijoilleTänään opastan sinua prosessin valmistamiseksi kokonainen verkkosivusto tyhjästä. Älä huoli, jos tämä kuulostaa vaikealta. Opastan sinut läpi sen joka vaiheessa. Lue lisää .

Tässä on tarvitsemasi HTML:

 Nimi: Ikä: 

Tämä html määrittelee lomakkeen, jossa on muutama elementti. Huomaa kuinka ne ovat toiminta ja menetelmä attribuutteja. Ne määrittelevät, missä ja miten lomake toimitetaan. Niitä ei tarvita, kun käytät AJAX: ta, mutta on hyvä idea käyttää niitä, koska se varmistaa, että verkkosivustosi vierailijat voivat silti käyttää sitä, jos JavaScript on poistettu käytöstä. Tällä sivulla on jQuery, jota Google isännöi heidän verkkosivuillaan CDN Mitä CDN-levyjä ovat ja miksi varastointi ei ole enää ongelmaCDN-levyt tekevät Internetistä nopean ja verkkosivustot kohtuuhintaisia, jopa kun mittasuhde miljoonille käyttäjille. Ensinnäkin kaistanleveys maksaa rahaa; ne meistä, joilla on rajoitetut sopimukset, tietävät sen aivan liian hyvin. Ei vain sinä ... Lue lisää . pää sisältää a käsikirjoitus tag - tähän kirjoitat koodisi.

Tämä muoto voi näyttää hieman tylsältä nyt, joten kannattaa harkita CSS: n oppiminen 5 vauvan vaihetta CSS: n oppimiseen ja Kick-Ass CSS -oritsijaksi tulemiseenCSS on tärkein muutosverkkosivut, joita viime vuosikymmenen aikana on nähty, ja se tasoitti tietä tyylien ja sisällön erottamiseen. XHTML määrittelee nykyaikaisella tavalla semanttisen rakenteen ... Lue lisää piristää sitä hiukan.

JavaScript

Lomakkeita voi lähettää JavaScriptillä monella tapaa. Ensimmäinen ja helpoin tapa tehdä niin on Lähetä menetelmä:

document.getElementById ( 'myform'). lähetä ();

Voit tietysti kohdistaa lomakkeen jQueryn avulla, jos haluat - sillä ei ole merkitystä:

$ ( '# Myform'). Lähetä ();

Tämä komento käskee selainta lähettämään lomakkeen, aivan kuten lähetä-painiketta. Se kohdistaa lomakkeen tunnuksella, ja tässä tapauksessa se on myform. Tämä ei ole AJAX, joten se lataa koko sivun uudelleen - jotain, joka ei aina ole toivottavaa.

vuonna menetelmä lomakkeen määritteessä määrittelit kuinka lomake lähetetään. Tämä voi olla LÄHETTÄÄ tai SAADA. Tätä ominaisuutta ei käytetä, kun lomakkeita lähetetään AJAX: llä, mutta samaa menetelmää voidaan käyttää.

Suuri osa nykyaikaisesta verkosta on loppunut GET- tai POST-pyynnöistä. Yleisesti ottaen GET: tä käytetään tietojen noutamiseen, kun taas POST: ta käytetään datan lähettämiseen (ja vastauksen palauttamiseen). Tietoja voidaan lähettää GET: llä, mutta POST on melkein aina parempi valinta - etenkin lomaketiedoille. Olet ehkä nähnyt GET-pyynnöt aiemmin - ne lähettävät URL-osoitteen liitteenä olevat tiedot:

somewebsite.com/index.html? Name = Joe

Kysymysmerkki kertoo selaimelle, että sitä välittömästi seuraavia tietoja ei käytetä verkkosivuston selaamiseen, vaan ne pitäisi sen sijaan välittää sivulle prosessoitavaksi. Tämä toimii hyvin yksinkertaisissa asioissa, kuten sivunumerossa, mutta sillä on joitain haittoja:

Enimmäismerkkiraja: URL-osoitteessa voi lähettää enintään merkkejä. Sinulla ei ehkä ole tarpeeksi, jos yrität lähettää suuren määrän tietoja.
näkyvyys: Kuka tahansa voi nähdä lähetettävät tiedot GET-pyynnössä - se ei ole hyvä arkaluontoisiin tietoihin, kuten salasanoihin tai lomaketietoihin.

POST-pyynnöt toimivat samalla tavalla, vain ne eivät lähetä tietoja URL-osoitteessa. Tämä tarkoittaa sitä, että voidaan lähettää suurempi määrä dataa (data tunnetaan nimellä hyötykuorma), ja tietynlaista turvallisuutta saadaan, jos tietoja ei paljasteta. Tietoja voidaan silti helposti käyttää, joten tutkia SSL-varmenne Mikä on SSL-varmenne ja tarvitsetko sitä?Internetin selaaminen voi olla pelottavaa, kun kyse on henkilökohtaisista tiedoista. Lue lisää jos haluat täydellisen mielenrauhan.

Käytetäänkö POST tai GET, tiedot lähetetään avain -> arvo paria. Yllä olevassa URL-osoitteessa avain on nimi, ja arvo on Joe.

Parempi tapa lähettää lomakkeita on käyttää Asynkroninen JavaScript ja XML (AJAX). JavaScript tukee AJAX-puheluita, mutta niiden käyttö voi olla hämmentävä. JQuery toteuttaa nämä täsmälleen samat menetelmät, mutta tekee sen helppokäyttöisellä tavalla. Voit määrätä selaimesi suorittamaan GET- tai POST-pyynnön - pysy POST-esimerkissä tässä esimerkissä, mutta GET-pyynnöt suoritetaan samalla tavalla.

Tässä on syntaksi:

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

Tämä koodi tekee useita asioita. Ensimmäinen osa ($) antaa selaimesi tietää, että haluat käyttää jQueryä tähän tehtävään. Toinen osa kutsuu lähettää menetelmä jQueryltä. Sinun on läpäistävä kaksi parametria; Ensimmäinen on URL, jolla tiedot lähetetään, kun taas toinen on data. Saatat huomata (riippuen URL-osoitteesta, jota yrität käyttää), että selaimesi Samaa alkuperää turvallisuuspolitiikka saattaa puuttua tähän. Voit ottaa sen käyttöön lähteiden välisen resurssien jakaminen kiertää tämän, mutta riittää, että usein osoitat URL-osoitteelle, jota ylläpidetään samalla verkkotunnuksella kuin sivusi.

Toinen parametri kutsuu jQuery sarjallistaa menetelmä lomakkeellasi. Tämä menetelmä käyttää kaikkia lomakkeen tietoja ja valmistelee ne lähettämistä varten - se järjestää ne sarjaksi.

Pelkästään tämä koodi riittää lomakkeen lähettämiseen, mutta saatat huomata, että asiat toimivat hieman oudolta. Kannattaa tutkia selaimen kehittäjätyökaluja, koska ne tekevät verkkojen virheenkorjauspyynnöistä helppoa.

Vaihtoehtoisesti Postinkantaja on erinomainen ilmainen työkalu HTTP-pyyntöjen testaamiseen.

Jos haluat lähettää lomakkeen AJAX: llä, kun lähetä-painiketta painetaan, se on aivan yhtä helppoa. Sinun on liitettävä koodisi Lähetä lomakkeen tapahtuma. Tässä on koodi:

$ (document) .on ('lähetä', '# myForm', function () {$ .post ('some / url', $ ('# myForm'). serialize ()); palauta väärä; });

Tämä koodi tekee useita asioita. Kun lomake lähetetään, selaimesi tulee ja ajaa koodisi ensin. Koodisi toimittaa sitten lomaketiedot AJAX: n avulla. Vaadittava viimeinen vaihe on estää alkuperäisen lomakkeen lähettäminen - olet jo tehnyt tämän AJAX: n kanssa, joten et halua sen tapahtuvan uudelleen!

Jos haluat suorittaa jonkin muun tehtävän AJAX: n valmistuttua (tai ehkä jopa palauttaa tilaviestin), sinun on käytettävä soita takaisin. JQuery tekee niistä erittäin helppokäyttöisiä - lähetä toiminto toisena parametrina vain näin:

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

tulos argumentti sisältää kaikki URL-osoitteen palauttamat tiedot, joille tiedot lähetettiin. Voit vastata näihin tietoihin helposti:

if (tulos == 'menestys') {// suorita jokin tehtävä. } else {// suorita jokin muu tehtävä. }

Se on se tähän viestiin. Toivottavasti sinulla on nyt vankka käsitys HTTP-pyynnöistä ja siitä, kuinka AJAX toimii lomakkeen yhteydessä.

Oppitko tänään uusia temppuja? Kuinka käytät AJAXia lomakkeiden kanssa? Kerro meille ajatuksesi alla olevissa kommenteissa!

Kuvapisteet: vectorfusionart / Shutterstock