V tem vadnemniku se boš naučil, kako lahko s GET metodologijo prejmeš in obdelaš obrazčne podatke. Ustvaril boš preprost obrazec v HTML-ju in videl, kako se ti podatki pošljejo na strežnik preko naslova. Razpravljali bomo o osnovah GET zahteve ter izrisali potrebne korake v Express.js.
Najpomembnejše ugotovitve
- Obrazčni podatki se lahko pošljejo na strežnik s GET metodo.
- Posredovani podatki se prikažejo kot povpraševalni parametri v URL naslovu.
- Enostavno lahko dostopaš do povpraševalnih parametrov zahtevka in jih nadalje obdeluješ.
Korak-za-korak Navodilo
Najprej bomo začeli s kreiranjem HTML obrazca. Akcija tvojega obrazca je ključna, saj določa, kam se bodo poslali obrazčni podatki.
Za ustvarjanje preprostega obrazca dodaj naslednje:
Akcija obrazca vsebuje pot, kamor morajo biti poslani podatki, v našem primeru /submitform. Tu bo kasneje opredeljen GET rokohitonec v našem Express strežniku. Za vnos uporabimo enostavno polje za besedilo:
Ko je obrazec nastavljen, moramo zagotoviti, da je strežnik pripravljen sprejeti podatke. Prepričaj se, da si v svojem Express strežniku konfiguriral GET metodo za obdelavo zahtev.
Nato osveži stran, da preveriš, ali vse deluje. Ko nekaj vpišeš v polje za besedilo, lahko obrazec pošlješ z pritiskom na tipko Return, tudi če ni gumba za oddajo.
Po pošiljanju obrazca boš moral prejeti odgovor od strežnika, ki potrjuje, da so bili podatki uspešno poslani.
Tukaj lahko vidiš obremenitev, ki je bila poslana strežniku. V našem primeru je bil parameter Ime pripet na URL naslov.
V strežniškem kodnem delu si zdaj oglejmo ustrezni GET rokohitonec, ki ga potrebujemo za obdelavo zahteve. Koda se bo nahajala v tvoji datoteki index.js. Rokohitonec opredeliš takole:
Zdaj lahko v kodnem delu strežnika pridobiš povpraševalne parametre s pridobivanjem request.query. To lahko prav tako uresničiš v svojem GET rokohitroncu.
Ko ponovno pošlješ obrazec, boš opazil, da se parameter pravilno vrne. Paziti moraš, da ponovno zaženeš strežnik ob vsaki spremembi.
Da lahko dostopaš do imena, uporabiš format request.query.Ime. Ko spreminjaš ime obrazca, bodi pozoren, da prilagodiš parameter tudi v strežniški kodi.
Ko spremeniš ime obrazca v first_name, bo zahtevani parameter izgledal takole:
Lahko vidiš, da strežnik pravilno prejema in izpisuje podatke:
Z osnovnim znanjem lahko zdaj obdeluješ prejete podatke, na primer jih shraniš v podatkovno zbirko, jih uporabiš na drugem mestu ali jih preprosto vrneš.
Če želiš, lahko prejete podatke celo vrneš na odjemalec in deluješ kot strežnik za odziv.
Izhod bi lahko bil takšen:
Če vnesete posebne znake v polje besedila, jih bo strežnik prav tako obdelal in ustrezno dekodiral. Opazili boste, da je izhod pravilen, ne glede na znake, ki jih je uporabnik vnesel.
Pomembno je opozoriti, da različni strežniški okviri različno obravnavajo kodiranje. Pri uporabi Expressa je dekodiranje parametrov poizvedbe običajno že vključeno, zato se vam ni treba obremenjevati s tem.
Zdaj imate osnove za obdelavo GET-zahtev, prav tako smo razpravljali o uporabi parametrov poizvedbe v okviru Expressa. Naslednjič se bomo posvetili metodi POST, ki zahteva drugačno implementacijo.
Povzetek
V tem vadnici ste se naučili, kako ustvariti preprosto spletno obrazčno aplikacijo s pomočjo metode GET. Postopek vključuje nastavitev HTML-obrazca, pošiljanje podatkov obrazca na strežnik Express ter pridobivanje parametrov poizvedbe za nadaljnjo obdelavo. Videli ste tudi, kako je strežnik pravilno konfiguriran za obvladovanje prejemanja obrazčnih podatkov in odzivanje nanje.
Pogosta vprašanja
Kaj je razlika med GET in POST?GET pošilja podatke prek URL-ja, medtem ko POST podatke prenaša v telesu zahteve.
Kako lahko uporabim več parametrov v svojem obrazcu?Lahko dodate več vnosi v svoj obrazec in jih ustrezno konfigurirate.
Kako ravnam s posebnimi znaki v obrazčnih podatkih?Express samodejno obdela dekodiranje posebnih znakov.
Ali moram strežnik vsakič znova zagnati ob vsaki spremembi?Da, vsaka sprememba v strežniški kodi zahteva ponovni zagon strežnika, da začne učinkovati.
