Kā izmantot AJAX Web formas nosūtīšanai

Reklāma

Jūs, iespējams, esat lasījis mūsu jQuery ceļvedis Pamata rokasgrāmata JQuery Javascript programmētājiemJa esat Javascript programmētājs, šī JQuery rokasgrāmata palīdzēs jums sākt kodēšanu, piemēram, ninja. Lasīt vairāk , kā arī mūsu piektā daļa jQuery apmācība par AJAX jQuery apmācība (5. daļa): AJAX tie visi!Tuvojoties mūsu jQuery mini-apmācības sērijas beigām, ir pienācis laiks padziļināti apskatīt vienu no jQuery visbiežāk izmantotajām funkcijām. AJAX ļauj vietnei sazināties ar ... Lasīt vairāk , bet šodien es jums parādīšu, kā izmantot AJAX, lai dinamiski nosūtītu tīmekļa veidlapu. JQuery ir visvienkāršākais veids, kā izmantot AJAX, tāpēc pārbaudiet mūsu darba sākšanas apmācība jQuery apmācība - darba sākšana: pamati un atlasītājiPagājušajā nedēļā es runāju par to, cik jQuery ir nozīmīgs jebkuram mūsdienu tīmekļa izstrādātājam un kāpēc tas ir satriecošs. Šonedēļ es domāju, ka ir pienācis laiks mums netīrīt rokas ar kādu kodu un uzzināt, kā ... Lasīt vairāk ja esat iesācējs. Iesim labi.

Kāpēc lietot AJAX?

Jums varētu rasties jautājums: “Kāpēc man vajag AJAX?” HTML ir lieliski spējīgs iesniegt veidlapas, un to dara diezgan nesāpīgā veidā. AJAX tiek ieviests lielākajā daļā tīmekļa lapu, un tā popularitāte turpina pieaugt.

Milzīgs ieguvums, ko sniedz AJAX, ir spēja daļēji slodze tīmekļa lapu daļas. Tas padara lapas ātrākas un atsaucīgākas, kā arī ietaupa joslas platumu, jo visas lapas vietā ir jāielādē tikai maza datu daļa. Šeit ir daži pamata AJAX lietošanas gadījumi:

• Regulāri pārbaudiet, vai nav jaunu e-pasta ziņojumu.
• Atjauniniet dzīvā futbola rezultātu ik pēc 30 sekundēm.
• Atjauniniet tiešsaistes izsoles cenu.

AJAX nodrošina jums, izstrādātājam, gandrīz neierobežotu iespēju padarīt tīmekļa lapas ātras, atsaucīgas un īsas - par ko jūsu apmeklētāji jums pateiksies.

HTML

Pirms darba sākšanas jums ir nepieciešama HTML forma. Ja nezināt, kas ir HTML, izlasiet mūsu ceļvedi kā izveidot vietni iesācējiem Kā izveidot vietni: iesācējiemŠodien es sniegšu jums norādījumus par pilnīgas vietnes izveidi no nulles. Neuztraucieties, ja tas izklausās grūti. Es jums to caurskatīšu ik uz soļa. Lasīt vairāk .

Šis ir nepieciešamais HTML kods:

 Vārds: Vecums: 

Šis html definē formu ar dažiem elementiem. Ievērojiet, kā tur ir darbība un metode atribūti. Tie nosaka, kur un kā veidlapa tiek iesniegta. Tie nav nepieciešami, kad izmantojat AJAX, taču ieteicams tos izmantot, jo tas nodrošina, ka jūsu vietnes apmeklētāji joprojām var to izmantot, ja viņiem ir atspējota JavaScript. Šajā lapā ir jQuery, ko Google mitina viņu vietne CDN Kas ir CDN un kāpēc krātuve vairs nav problēmaCDN padara internetu ātru un tīmekļa vietnes pieejamu pat tad, ja jūs mērojat miljoniem lietotāju. Pirmkārt, joslas platums maksā naudu; tie no mums, kuriem ir ierobežoti līgumi, to zina pārāk labi. Ne tikai jūs ... Lasīt vairāk . galva satur a skripts tags - šeit rakstīsit kodu.

Šī forma šobrīd var šķist nedaudz garlaicīga, tāpēc jūs varētu vēlēties to apsvērt mācīšanās CSS 5 mazuļa darbības CSS apgūšanā un kļūšanā par Kick-Ass CSS burviCSS ir vienīgās vissvarīgākās pārmaiņas tīmekļa lapas, kuras redzētas pēdējā desmitgadē, un tas pavēra ceļu stila un satura nodalīšanai. Mūsdienu veidā XHTML definē semantisko struktūru ... Lasīt vairāk lai to mazliet atdzīvinātu.

JavaScript

Ir vairāki veidi, kā var iesniegt veidlapas, izmantojot JavaScript. Pirmais un vienkāršākais veids, kā to izdarīt, ir Iesniegt metode:

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

Jūs, protams, varat mērķēt uz formu ar jQuery, ja vēlaties - tam nav nozīmes:

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

Šī komanda liek jūsu pārlūkprogrammai iesniegt veidlapu, tieši tāpat kā nospiežot pogu Iesniegt. Tā ir vērsta uz formu ar tās ID, un šajā gadījumā tas ir myForm. Tas nav AJAX, tāpēc tas atkārtoti ielādēs visu lapu - kaut kas ne vienmēr ir vēlams.

Iekš metode savas formas atribūts, jūs norādījāt, kā iesniegt veidlapu. Tas var būt POST vai GŪT. Šis atribūts netiek izmantots, iesniedzot veidlapas, izmantojot AJAX, bet to pašu metodi var izmantot.

Liela daļa mūsdienu tīmekļa ir izsmelti GET vai POST pieprasījumi. Vispārīgi runājot, GET tiek izmantots datu izguvei, savukārt POST tiek izmantots datu nosūtīšanai (un atbildes nosūtīšanai). Datus var nosūtīt, izmantojot GET, taču gandrīz vienmēr labāka izvēle ir POST - īpaši formas datiem. Jūs, iespējams, jau esat redzējis GET pieprasījumus - viņi nosūta URL pievienotos datus:

somewebsite.com/index.html? vārds = Džo

Jautājuma zīme norāda pārlūkprogrammai, ka visi dati, kas seko tūlīt pēc tā, nav jāizmanto tīmekļa vietnei, bet tā vietā jānodod lapai, lai to apstrādātu. Tas labi darbojas tādās vienkāršās lietās kā lapas numurs, taču tam ir daži trūkumi:

Maksimālais rakstzīmju ierobežojums: URL var nosūtīt maksimālo rakstzīmju skaitu. Jums, iespējams, nepietiek, ja mēģināt nosūtīt lielu datu daudzumu.
Redzamība: Ikviens var redzēt datus, kas tiek sūtīti GET pieprasījumā - tas nav par labu slepeniem datiem, piemēram, parolēm vai veidlapas datiem.

POST pieprasījumi darbojas līdzīgi, tikai tie nenosūta datus URL. Tas nozīmē, ka var nosūtīt lielāku datu daudzumu (dati ir zināmi kā kravas), un zināmu drošību iegūst, neatklājot datus. Dati joprojām ir viegli pieejami, tāpēc izpētiet SSL sertifikāts Kas ir SSL sertifikāts, un vai jums tas ir vajadzīgs?Interneta pārlūkošana var būt biedējoša, ja ir iesaistīta personiskā informācija. Lasīt vairāk ja vēlaties pilnīgu sirdsmieru.

Neatkarīgi no tā, vai tiek izmantots POST vai GET, dati tiek nosūtīti atslēga -> vērtību pāri. Iepriekš norādītajā URL atslēga ir vārds, un vērtība ir Džo.

Labāks veids, kā iesniegt veidlapas, ir izmantot Asinhronā JavaScript un XML (AJAX). JavaScript atbalsta AJAX zvanus, taču to lietošana var būt mulsinoša. JQuery īsteno tieši tādas pašas metodes, taču to dara viegli lietojamā veidā. Varat uzdot pārlūkprogrammai veikt GET vai POST pieprasījumu - šajā piemērā pieturieties pie POST, bet GET pieprasījumi tiek izpildīti līdzīgā veidā.

Šī ir sintakse:

$ .post ('daži / url', $ ('# myForm'). serialize ());

Šis kods dara vairākas lietas. Pirmā daļa ($) ļauj jūsu pārlūkprogrammai zināt, ka vēlaties izmantot jQuery šim uzdevumam. Otrajā daļā tiek saukts pastu metode no jQuery. Jums jāiziet divi parametri; Pirmais ir URL, uz kuru jānosūta dati, savukārt otrais ir dati. Jūs varat atrast (atkarībā no URL, kuram mēģināt piekļūt), ka jūsu pārlūkprogrammas vienas izcelsmes šeit var iejaukties drošības politika. Jūs varat iespējot dažādu izcelsmju resursu dalīšana lai to apietu, bieži vien pietiek ar norādi uz URL, kas mitināts tajā pašā domēnā kā jūsu lapa.

Otrais parametrs izsauc jQuery sērijveidā metode uz jūsu veidlapas. Šī metode piekļūst visiem datiem no jūsu veidlapas un sagatavo tos nosūtīšanai - tā tos serializē.

Ar šo kodu vien ir pietiekami, lai iesniegtu veidlapu, taču jums var šķist, ka lietas rīkojas mazliet savādi. Ir vērts izpētīt pārlūka izstrādātāju rīkus, jo tie tīkla atkļūdošanas pieprasījumus padara brīvi.

Alternatīvi Pastnieks ir lielisks bezmaksas rīks HTTP pieprasījumu pārbaudei.

Tas ir vienkārši, ja vēlaties iesniegt savu veidlapu, izmantojot AJAX, kad tiek nospiesta poga Iesniegt. Kods jāpievieno Iesniegt formas notikums. Šis ir kods:

$ (dokuments) .on ('iesniegt', '# myForm', function () {$ .post ('daži / url', $ ('# myForm'). serializēt ()); atgriezties nepatiess; });

Šis kods dara vairākas lietas. Kad veidlapa ir iesniegta, nāk pārlūkprogramma un vispirms palaiž jūsu kodu. Pēc tam jūsu kods iesniedz veidlapas datus, izmantojot AJAX. Pēdējais nepieciešamais solis ir neļaut iesniegt oriģinālo veidlapu - jūs jau esat to izdarījis ar AJAX, tāpēc nevēlaties, lai tā atkārtotos!

Ja vēlaties veikt kādu citu uzdevumu, kad AJAX ir beidzies (vai varbūt pat atgriezt statusa ziņojumu), jums jāizmanto atzvani. JQuery padara tos ļoti ērti lietojamus - vienkārši nododiet funkciju kā vēl vienu parametru, piemēram:

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

rezultāts arguments satur visus datus, ko atgriezis vietrādis URL, uz kuru dati tika nosūtīti. Jūs varat viegli atbildēt uz šiem datiem:

if (rezultāts == 'panākumi') {// veiciet kādu uzdevumu. } cits {// veic kādu citu uzdevumu. }

Tas ir šajā amatā. Cerams, ka jums tagad ir skaidra izpratne par HTTP pieprasījumiem un to, kā AJAX darbojas veidlapas kontekstā.

Vai šodien iemācījāties jaunus trikus? Kā jūs izmantojat AJAX ar formām? Paziņojiet mums savas domas komentāros zemāk!

Attēlu kredīti: vectorfusionart / Shutterstock