Kaip naudoti AJAX norint siųsti žiniatinklio formą

Skelbimas

Galbūt perskaitėte mūsų „jQuery“ vadovas Pagrindinis „JQuery“ vadovas „Javascript“ programuotojamsJei esate „Javascript“ programuotojas, šis „JQuery“ vadovas padės jums pradėti koduoti kaip ninja. Skaityti daugiau , taip pat penktoji mūsų dalis „jQuery“ pamoka apie AJAX „jQuery“ vadovėlis (5 dalis): AJAX jie visi!Artėjant mūsų „jQuery“ mini vadovėlių serijos pabaigai, atėjo laikas pažvelgti į vieną iš labiausiai naudojamų „jQuery“ funkcijų. AJAX leidžia svetainei bendrauti su ... Skaityti daugiau , bet šiandien jums parodysiu, kaip naudoti AJAX dinamiškai siųsti žiniatinklio formą. „JQuery“ yra pats lengviausias būdas naudoti AJAX, taigi patikrinkite mūsų pradžios pamoka „jQuery“ pamoka - pradžia: pagrindai ir parinkėjaiPraėjusią savaitę aš kalbėjau apie tai, kokia svarbi „jQuery“ bet kuriam šiuolaikiniam interneto kūrėjui ir kodėl tai nuostabu. Šią savaitę, manau, atėjo laikas susitepti rankas su kažkokiu kodu ir išmokti, kaip ... Skaityti daugiau jei esate pradedantysis. Įšokime į dešinę.

Kodėl verta naudoti AJAX?

Jums gali kilti klausimas: „Kodėl man reikia AJAX?“ HTML puikiai tinka pateikti formas ir tai daro gana neskausmingai. AJAX įdiegta daugumoje tinklalapių, o jo populiarumas ir toliau auga.

Didžiulė „AJAX“ nauda yra galimybė dalinai pakrauti tinklalapių dalys. Dėl to puslapiai rodomi greičiau ir reaguoja greičiau, o pralaidumas sumažėja, nes reikia įkelti ne nedidelę duomenų dalį, o visą puslapį. Čia yra keletas pagrindinių AJAX naudojimo atvejų:

• Reguliariai tikrinkite, ar nėra naujų el. Laiškų.
• Atnaujinkite tiesioginį futbolo rezultatą kas 30 sekundžių.
• Atnaujinkite internetinio aukciono kainą.

AJAX suteikia jums, kūrėjui, beveik neribotas galimybes interneto puslapius padaryti greitus, reaguojančius ir šmaikščius - už ką jūsų lankytojai jums padėkos.

HTML

Prieš pradėdami, jums reikia HTML formos. Jei nežinote, kas yra HTML, tada perskaitykite mūsų vadovą kaip sukurti svetainę pradedantiesiems Kaip susikurti svetainę: pradedantiesiemsŠiandien aš jums patarsiu, kaip sukurti svetainę nuo nulio. Nesijaudinkite, jei tai skamba sunkiai. Kiekviename žingsnyje aš jums tai paaiškinsiu. Skaityti daugiau .

Štai jums reikalingas HTML kodas:

 Vardas: Amžius: 

Šis html nusako formą su keliais elementais. Atkreipkite dėmesį, kaip ten yra veiksmas ir metodas atributai. Jie nustato, kur ir kaip forma pateikiama. Jie nėra reikalingi, kai naudojate AJAX, tačiau verta juos naudoti, nes tai garantuoja, kad jūsų svetainės lankytojai vis tiek galės ja naudotis, jei jiems neleidžiama „JavaScript“. Šiame puslapyje yra „jQuery“, kurį „Google“ priglobia CDN Kas yra CDN ir kodėl saugykla nebėra problemaCDN leidžia greitai naudotis internetu ir svetainėmis naudotis net ir tuo atveju, kai jūs naudojate milijonus vartotojų. Pirma, pralaidumas kainuoja pinigus; tie iš mūsų, kurie sudaro ribotas sutartis, tai žino per gerai. Ne tik tu ... Skaityti daugiau . galva yra a scenarijus žyma - čia rašysite savo kodą.

Ši forma šiuo metu gali atrodyti šiek tiek nuobodi, todėl galbūt norėsite apsvarstyti mokytis CSS 5 kūdikio žingsniai norint išmokti CSS ir tapti „Kick-Ass CSS burtininku“CSS yra vienintelis svarbiausias per pastarąjį dešimtmetį matomas internetinis puslapis, kuris padėjo atskirti stilių ir turinį. Šiuolaikiniu būdu XHTML nusako semantinę struktūrą ... Skaityti daugiau kad šiek tiek pagyvintų.

„JavaScript“

Yra keletas būdų, kaip pateikti formas naudojant „JavaScript“. Pirmasis ir lengviausias būdas tai padaryti yra Pateikti metodas:

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

Žinoma, jei norite, galite nukreipti į formą naudodami „jQuery“ - tai neturi jokios reikšmės:

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

Ši komanda liepia naršyklei pateikti formą, kaip ir paspaudus mygtuką „pateikti“. Ji nukreipta į formą pagal jos ID, ir šiuo atveju tai yra „myForm“. Tai nėra AJAX, todėl jis įkels visą puslapį - tai, ko ne visada norima.

Viduje konors metodas jūsų formos atributas, jūs nurodėte, kaip pateikti formą. Taip gali būti POST arba GAUTI. Šis atributas nenaudojamas teikiant formas naudojant AJAX, tačiau gali būti naudojamas tas pats metodas.

Didelė dalis šiuolaikinio interneto yra pašalinta iš GET ar POST užklausų. Paprastai kalbant, GET naudojamas duomenims gauti, o POST naudojamas duomenims siųsti (ir atsakymui grąžinti). Duomenis galima siųsti naudojant GET, tačiau beveik visada yra geresnis pasirinkimas POST, ypač formos duomenims. Galbūt anksčiau matėte GET užklausas - jie siunčia duomenis, pridėtus prie URL:

somewebsite.com/index.html? vardas = Džo

Klausimo ženklas nurodo naršyklei, kad visi po jo esantys duomenys nebus naudojami tinklalapiui naršyti, o turėtų būti perduodami į puslapį, kad jis galėtų jį apdoroti. Tai gerai tinka paprastiems dalykams, pavyzdžiui, puslapio numeriui, tačiau turi tam tikrų trūkumų:

Didžiausias simbolių apribojimas: URL gali būti išsiųstas maksimalus simbolių skaičius. Jums gali nepakakti, jei bandote išsiųsti didelį kiekį duomenų.
Matomumas: Bet kuris asmuo gali matyti duomenis, siunčiamus pateikiant GET užklausą - tai nėra naudinga neskelbtiniems duomenims, tokiems kaip slaptažodžiai ar formos duomenys.

POST užklausos veikia panašiai, tik jos nesiunčia duomenų URL. Tai reiškia, kad gali būti išsiųstas didesnis duomenų kiekis (duomenys žinomi kaip naudingas krovinys), o tam tikras saugumas įgyjamas neatskleidžiant duomenų. Vis dėlto duomenis vis dar galima lengvai pasiekti, todėl pažvelkite į SSL sertifikatas Kas yra SSL sertifikatas ir ar jums jo reikia?Naršymas internete gali būti baisus, kai naudojama asmeninė informacija. Skaityti daugiau jei norite visiškos ramybės.

Nesvarbu, ar naudojamas POST, ar GET, duomenys siunčiami Raktas -> vertės porų. Aukščiau esančiame URL raktas yra vardas, o vertė yra Džo.

Geriau pateikti formas yra naudoti Asinchroninis „JavaScript“ ir XML (AJAX). „JavaScript“ palaiko AJAX skambučius, tačiau juos naudoti gali būti painu. „JQuery“ įgyvendina tuos pačius metodus, tačiau tai daro lengvai naudojamu būdu. Galite nurodyti savo naršyklei atlikti GET arba POST užklausą - laikykitės šio pavyzdžio POST, tačiau GET užklausos vykdomos panašiai.

Štai sintaksė:

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

Šis kodas daro keletą dalykų. Pirma dalis ($) leidžia naršyklei žinoti, kad šiai užduočiai norite naudoti „jQuery“. Antroji dalis vadinama paštu metodas iš „jQuery“. Turite peržengti du parametrus; Pirmasis yra URL, kuriuo reikia siųsti duomenis, o antrasis - duomenys. Galite pastebėti (atsižvelgiant į URL, kurį bandote pasiekti), kad jūsų naršyklės „ tos pačios kilmės saugumo politika čia gali kištis. Galite įjungti kryžminės kilmės išteklių pasidalinimas apeiti tai, bet dažnai pakanka nurodyti tik URL, esančius tame pačiame domene, kuriame yra jūsų puslapis.

Antrasis parametras iškviečia „jQuery“ serializuoti metodas pagal jūsų formą. Šis metodas pasiekia visus duomenis iš jūsų formos ir paruošia juos perdavimui - jis juos sera.

Vien tik šio kodo užtenka norint pateikti formą, tačiau gali pasirodyti, kad viskas veikia šiek tiek keistai. Verta ištirti savo naršyklės kūrėjų įrankius, nes jie verčia derinti tinklo užklausas.

Arba Paštininkas yra puikus nemokamas įrankis HTTP užklausoms tikrinti.

Jei norite pateikti formą naudodami AJAX, kai paspaudžiate pateikimo mygtuką, tai taip paprasta. Savo kodą turite pridėti prie Pateikti formos įvykis. Štai kodas:

$ (dokumentas) .on ('pateikti', '# myForm', function () {$ .post ('some / url', $ ('# myForm'). serialize ()); grąžinti klaidingą; });

Šis kodas daro keletą dalykų. Kai jūsų forma bus pateikta, naršyklė ateis ir pirmiausia paleis jūsų kodą. Tada jūsų kodas pateikia formos duomenis naudodamas AJAX. Paskutinis būtinas žingsnis yra užkirsti kelią originalios formos pateikimui - jūs jau tai padarėte su AJAX, todėl nenorite, kad tai pasikartotų!

Jei norite atlikti kitą užduotį, kai AJAX baigsis (o gal net grąžinsite būsenos pranešimą), turite naudoti perskambink. „JQuery“ daro juos labai paprastus naudoti - tiesiog perduokite funkciją kaip kitą tokį parametrą:

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

rezultatas Argumente yra visi duomenys, kuriuos grąžino URL, kuriam duomenys buvo išsiųsti. Galite lengvai reaguoti į šiuos duomenis:

if (rezultatas == 'sėkmė') {// atlikti kokią nors užduotį. } else {// atlikti kokią nors kitą užduotį. }

Štai šis pranešimas. Tikimės, kad jūs dabar gerai suprantate HTTP užklausas ir kaip AJAX veikia formos kontekste.

Ar šiandien išmokote naujų triukų? Kaip jūs naudojate AJAX su formomis? Praneškite mums savo mintis komentaruose žemiau!

Vaizdo kreditai: „vectorfusionart“ / „Shutterstock“