Šajā instrukcijā tu iemācīsies, kā ar JavaScript nolasīt un apstrādāt lietotāju ievadītos datus no veidlapām. Formas elementi ir svarīga daļa no katras tīmekļa vietnes, jo tie ļauj lietotājiem ievadīt informāciju. Bieži vien tiek uzskatīts, ka tam ir nepieciešams izmantot sarežģītus frameworkus. Šajā rakstā mēs parādīsim, kā veikt veiksmīgu veidlapu datu apstrādi ar vienkāršu JavaScript.
Galvenie secinājumi
- Tu uzzināsi, kā izveidot formas, kā ar JavaScript piekļūt formu datiem un kā novērst formas standarta uzvedību, izmantojot preventDefault, lai iegūtu kontroli pār savu lietotāju datu ievadi.
Pa solim-pa solim pamācība
Sāc ar vienkāršu HTML veidlapu savā dokumentā. Rūpējies par to, lai veiksmīgi ievietotu dažādus ievades laukus un iesniegšanas pogu.
Kad tavas formas ir redzamas pārlūkā, vari tās pārbaudīt. Ievadi vārdu ievades laukā un nospied Enter taustiņu vai iesniegšanas pogu. Ja viss strādā pareizi, vajadzētu redzēt brīdinājumu ar ievadīto vārdu.
Lai to panāktu, pievieno skripta tagu savā HTML failā. Šajā skriptā definē globālu funkciju ar nosaukumu submitForm, kas akceptē notikumu objektu kā parametru.
Skriptā vari noteikt notikuma apstrādātāju onsubmit savai formai. Tas nozīmē, ka submitForm funkcija tiks izsaukta, kad forma tiks iesniegta. Atceries, ka notikuma objekts vienmēr būs pieejams, atrodoties notikumu apstrādātājā.
Viens no svarīgajiem soļiem ir novērst formas standartdarbību, izsaucot event.preventDefault(). Tas ir svarīgi, jo negribam, lai pēc datu iesniegšanas veidlapa pārlādē lapu.
Tagad vari sākt nolasīt veidlapas datus. Formas dati ir pieejami event.target. Tas padara ievadīto informāciju pieejamu.
Lai iegūtu formas datus, izveido jaunu objektu ar FormData konstruktoru un padod formu elementu kā parametru. Pēc objekta izveides vari piekļūt ievades vērtībām, izmantojot get metodi.
Ar formData.get('firstName') piemēram, vari iegūt ievades lauka vērtību ar nosaukumu 'firstName'. Šo vērtību varēsi izmantot, lai izveidotu ziņojumu, kas tiks parādīts lietotājam.
Ja vēlies paplašināt veidlapu ar vēl vienu ievades lauku, rīkojies šādi: pievieno papildu teksta lauku uzvārdam ar nosaukumu 'lastName'. Pēc tam vari veikt līdzīgus soļus, lai iegūtu tā vērtību.
Ar abām vērtībām vari radīt personalizētu ziņojumu. Piemēram: "Sveiki [Vārds] [Uzvārds]!”
Lai ziņojumu neattēlotu vairs ar brīdinājumu, bet integrētu to tieši HTML, vari pievienot jaunu sadaļu DOM, kurā ziņojums tiek parādīts kā teksts. Izveido div ar unikālu ID un iestatiet tā iekšējo tekstu uz rezultējošo ziņojumu.
Tagad vari izmēģināt dažādas variācijas, izvadot datus konsolē vai izmantojot tos papildu JavaScript darbībām, piemēram, POST pieprasījumam, izmantojot fetch.
Šī ir pamata veids, kā ar JavaScript varat izlasīt un izmantot formu datus. Ir daudz citu veidu, kā to uzlabot, piemēram, pievienojot validācijas vai turpmāku datu apstrādi serverī.
Kopsavilkums
Šajā pamācībā jūs esat iemācījušies, kā ar vienkāršām JavaScript funkcijām varat izlasīt formu datus. Jūs esat izpētījis notikuma svarīgumu event.preventDefault un redzējis, kā datus var ievietot gan paziņojumos, gan tieši dokumentā. Ar šo pamatu jūs esat labi sagatavots, lai izveidotu sarežģītākas formas un to datu apstrādi.
Bieži uzdotie jautājumi
Kā es varu piekļūt formu datiem?Jūs varat piekļūt formu datiem, izmantojot new FormData(event.target) un radot jaunu FormData objektu.
Kas notiks, ja neizsaucu event.preventDefault()?Bez event.preventDefault() tiks izpildīta pārlūkprogrammas noklusētā uzvedība, kas var izraisīt lapas pārlādi.
Vai varu uz vienas lapas ievietot vairākas formas?Jā, jūs varat uz vienas lapas ievietot vairākas formas un katrā formā var būt savs onsubmit funkcija.
Kā varu izmantot formu datus Fetch pieprasījumam?Jūs varat pārvērst formu datus JSON formātā un pēc tam nosūtīt uz serveri ar Fetch API.
Vai JavaScript pamatformas ir nepieciešamas formas datu apstrādei?Nē, nav nepieciešams izmantot platformas. Formu datu apstrādi var veikt pilnībā ar tīru JavaScript.
