Što je FormData Object u JavaScriptu?

Objekti FormData koriste se za snimanje obrasca prilikom podnošenja obrasca dohvaćanjem pomoću druge metode. Kako bismo dodali polja s metodama, možemo ili konstruirati novi ili najnoviji FormData HTML obrazac ili napraviti objekt bez korištenja obrazaca. Podaci u tekstualnim poljima moraju se unijeti kada se klikne gumb za slanje, a JavaScript ih mora identificirati i dostaviti te vrijednosti varijable.

Ovaj tekst će demonstrirati FormData Object u JavaScriptu uz pomoć najlakših primjera.

Što je FormData Object u JavaScriptu?

Objekt FormData popularan je pristup izgradnji zbirke podataka u JavaScriptu koji se može poslati na poslužitelj koristeći ' XMLHttpZahtjev ” ili dohvaćeno. Obavlja iste funkcije kao element obrasca HTML. Može se usporediti s nizom nizova. Zaseban niz predstavlja svaki element koji želimo prenijeti na poslužitelj.

Sintaksa

Da biste koristili objekt FormData u JavaScriptu, upotrijebite sljedeću sintaksu:

konst obrazacData = novi FormData ( ) ;

Primjer 1: Stvorite FormData objekt bez HTML obrasca

Prije svega, inicijalizirajte konstantu s određenim imenom i dodijelite određenu vrijednost toj konstanti. Ovdje, ' novi podaci obrasca() ” koristi se kao konstantna vrijednost:

Konst obrazacData = novi FormData ( ) ;

Zatim dodajte podatke prosljeđivanjem argumenata u ' dodati() ” metoda

obrazacData. dodati ( 'Fname' , 'Službenik' ) ;

obrazacData. dodati ( 'Ime' , 'Javed' ) ;

obrazacData. dodati ( 'dob' , 25 ) ;

Nakon toga upotrijebite ' konzola.log() ” metoda:

konzola. log ( 'Informacije o obrascu' ) ;

Koristiti ' za ' petlja za ponavljanje i prikaz izlaza na konzoli uz pomoć ' konzola.log() ” metoda:

za ( neka obj od formData ) {

konzola. log ( obj ) ;

}

Primjer 2: Stvorite FormData objekt s HTML obrascem

Da biste dodali FormData s HTML obrascem, prvo izradite obrazac u HTML-u uz pomoć ' ” i dodajte sljedeći atribut naveden u nastavku:

Da biste dodali polje za unos u obrazac, koristite ' ” element.
Unutar ulazne oznake navedite ' tip ” za definiranje tipa podataka elementa. Postoji više mogućih vrijednosti za ovaj atribut, uključujući ' tekst ”, “ broj ”, “ datum ”, “ lozinka ', i još mnogo toga.
' rezerviranog mjesta ” koristi se za dodavanje vrijednosti za prikaz u polju za unos, a „ime” se odnosi na naziv polja za unos.
“ na klik ” događaj se pokreće kada korisnik izvrši neku funkciju klikom miša:

< obrazac id = 'oblik' >

< vrsta unosa = 'tekst' Ime = 'Fname' rezerviranog mjesta = 'Unesite svoje ime' > 

< vrsta unosa = 'tekst' Ime = 'Ime' rezerviranog mjesta = 'Unesite svoje prezime' > 

< vrsta unosa = 'datum' Ime = 'dob' rezerviranog mjesta = 'Unesite svoje godine' > 

< vrsta unosa = 'dugme' vrijednost = 'Unesi' na klik = 'podaci()' >

oblik >

Zatim pristupite obrascu u CSS-u i postavite prostor oko obrasca:

. oblik {

margina : 20 px ;

podstava : 30 px ;

}

Nadalje, upotrijebite oznaku skripte i dodajte sljedeći kod:

podaci o funkciji ( ) {
bio oblik = dokument. getElementById ( 'oblik' ) ;
constformData = newFormData ( oblik ) ;
konzola. log ( 'Podaci obrasca' ) ;
za ( neka obj offormData ) {
konzola. log ( obj ) ;
}
}

U gornjem isječku koda:

Pozovite ' getElementById(“obrazac”) ” za pristup obrascu korištenjem ID-a obrasca.
Sada pohranite pristupni element u novu konstantu ' obrazacData ”.
Koristiti ' za ” petlja za iteraciju i ispis elemenata na konzoli.

Izlaz

Naučili ste o stvaranju objekta FormData u JavaScriptu.

Zaključak

Objekt FormData koristi se za izgradnju zbirke podataka u JavaScriptu koji se mogu poslati na poslužitelj. Za stvaranje objekta Formdata u JavaScriptu prikazane su dvije metode. Prvi se koristi jednostavnim JavaScriptom, a drugi je stvaranjem obrasca u HTML-u i njegovim povezivanjem s JavaScriptom. Ovaj post govori o objektima FormData u JavaScriptu.

Što je FormData Object u JavaScriptu?