Kaj je FormData Object v JavaScriptu?

Objekti FormData se uporabljajo za zajemanje obrazca pri oddaji obrazca tako, da ga pridobijo z drugo metodo. Za dodajanje polj z metodami lahko izdelamo nov ali najnovejši obrazec HTML FormData ali naredimo objekt brez uporabe obrazcev. Podatke v besedilnih poljih je treba vnesti, ko kliknete gumb za oddajo, JavaScript pa jih mora prepoznati in dostaviti vrednosti teh spremenljivk.

Ta zapis bo prikazal FormData Object v JavaScriptu s pomočjo najlažjih primerov.

Kaj je FormData Object v JavaScriptu?

Objekt FormData je priljubljen pristop k ustvarjanju zbirke podatkov v JavaScriptu, ki se lahko pošlje strežniku z uporabo ' XMLHttpRequest ” ali pridobljeno. Izvaja enake funkcije kot element obrazca HTML. Lahko ga primerjamo z nizom nizov. Ločeno polje predstavlja vsak element, ki ga želimo prenesti na strežnik.

Sintaksa

Če želite uporabiti objekt FormData v JavaScriptu, uporabite naslednjo sintakso:

konst formData = novo FormData ( ) ;

1. primer: ustvarite objekt FormData brez obrazca HTML

Najprej inicializirajte konstanto z določenim imenom in tej konstanti dodelite določeno vrednost. Tukaj je ' novi FormData() ” se uporablja kot konstantna vrednost:

Konst formData = novo FormData ( ) ;

Nato dodajte podatke tako, da posredujete argumente v ' pripni() ” metoda

formData. priložiti ( 'Fname' , 'Oficir' ) ;

formData. priložiti ( 'Ime' , 'Javed' ) ;

formData. priložiti ( 'starost' , 25 ) ;

Po tem uporabite » console.log() ” metoda:

konzola. dnevnik ( 'Podatki o obrazcu' ) ;

Uporabi ' za ' zanko za ponavljanje in prikaz izhoda na konzoli s pomočjo ' console.log() ” metoda:

za ( naj obj formData ) {

konzola. dnevnik ( obj ) ;

}

Primer 2: Ustvarite predmet FormData z obrazcem HTML

Če želite dodati FormData z obrazcem HTML, najprej ustvarite obrazec v HTML s pomočjo » « in dodajte naslednji atribut, naveden spodaj:

Če želite dodati vnosno polje v obrazec, uporabite » ” element.
Znotraj vnosne oznake podajte » vrsta ” za določitev vrste podatkov elementa. Obstaja več možnih vrednosti za ta atribut, vključno z ' besedilo ”, “ število ”, “ datum ”, “ geslo ', in še veliko več.
' rezervirano mesto « se uporablja za dodajanje vrednosti za prikaz v vnosnem polju, »ime« pa se nanaša na ime vnosnega polja.
“ onclick ” dogodek se sproži, ko uporabnik s klikom miške izvede funkcijo:

< ID obrazca = 'oblika' >

< vrsta vnosa = 'besedilo' ime = 'Fname' rezervirano mesto = 'Vnesite svoje ime' >< št >< št >

< vrsta vnosa = 'besedilo' ime = 'Ime' rezervirano mesto = 'Vnesite svoj priimek' >< št >< št >

< vrsta vnosa = 'datum' ime = 'starost' rezervirano mesto = 'Vnesite svojo starost' >< št >< št >

< vrsta vnosa = 'gumb' vrednost = 'Enter' onclick = 'podatki()' >

oblika >

Nato odprite obrazec v CSS in nastavite prostor okoli obrazca:

. oblika {

marža : 20 slikovnih pik ;

oblazinjenje : 30 slikovnih pik ;

}

Poleg tega uporabite oznako skripta in dodajte naslednjo kodo:

funkcijski podatki ( ) {
je bila forma = dokument. getElementById ( 'oblika' ) ;
constformData = newFormData ( oblika ) ;
konzola. dnevnik ( 'Podatki obrazca' ) ;
za ( let obj offormData ) {
konzola. dnevnik ( obj ) ;
}
}

V zgornjem delčku kode:

Prikličite ' getElementById('obrazec') ” za dostop do obrazca z uporabo ID-ja obrazca.
Zdaj shranite dostopni element v novo konstanto ' formData ”.
Uporabi ' za ” zanko za ponovitev in natisnite elemente na konzoli.

Izhod

Naučili ste se o ustvarjanju objekta FormData v JavaScriptu.

Zaključek

Objekt FormData se uporablja za ustvarjanje zbirke podatkov v JavaScriptu, ki jih je mogoče poslati strežniku. Za ustvarjanje objekta Formdata v JavaScript sta prikazani dve metodi. Prvi je z uporabo preprostega JavaScripta, drugi pa z ustvarjanjem obrazca v HTML in povezovanjem z JavaScriptom. Ta objava je govorila o objektih FormData v JavaScriptu.

Kaj je FormData Object v JavaScriptu?