Hva er et FormData-objekt i JavaScript?

FormData-objekter brukes til å fange opp skjemaet når du sender inn et skjema ved å hente det med en annen metode. For å legge til felt med metoder, kan vi enten konstruere et nytt eller siste FormData HTML-skjema eller lage et objekt uten å bruke noen skjemaer. Dataene i tekstfeltene må oppgis når du klikker på send-knappen, og JavaScript må identifisere dem og levere disse variabelverdiene.

Denne oppskriften vil demonstrere FormData-objektet i JavaScript ved hjelp av de enkleste eksemplene.

Hva er et FormData-objekt i JavaScript?

Et FormData-objekt er en populær tilnærming til å bygge en datasamling i JavaScript som kan sendes til serveren ved å bruke ' XMLHttpRequest ” eller hentet. Den utfører de samme funksjonene som HTML-skjemaelementet. Det kan sammenlignes med en rekke matriser. En separat matrise representerer hvert element vi ønsker å overføre til serveren.

Syntaks

For å bruke FormData-objektet i JavaScript, bruk følgende syntaks:

konst formData = ny FormData ( ) ;

Eksempel 1: Lag FormData-objekt uten HTML-skjema

Først av alt, initialiser en konstant med et spesifikt navn og tilordne en bestemt verdi til den konstanten. Her er ' new FormData() ' brukes som en konstant verdi:

Konst formData = ny FormData ( ) ;

Deretter legger du til dataene ved å sende argumentene i ' legge til() 'metoden

formData. legge til ( 'Fname' , 'Offiser' ) ;

formData. legge til ( 'Lname' , 'Javed' ) ;

formData. legge til ( 'alder' , 25 ) ;

Etter det, bruk ' console.log() ' metode:

konsoll. Logg ( 'Skjemainformasjon' ) ;

Bruke ' til ”-løkke for å iterere og vise utdataene på konsollen ved hjelp av “ console.log() ' metode:

til ( la obj av formData ) {

konsoll. Logg ( obj ) ;

}

Eksempel 2: Lag FormData-objekt med et HTML-skjema

For å legge til FormData med et HTML-skjema, lag først et skjema i HTML ved hjelp av ' '-elementet og legg til følgende attributt oppført nedenfor:

For å legge til inndatafeltet i skjemaet, bruk ' ' element.
Inne i input-taggen, spesifiser ' type ”-attributt for å definere elementets datatype. Det er flere mulige verdier for dette attributtet, inkludert ' tekst ', ' Antall ', ' Dato ', ' passord ', og mange flere.
« plassholder ' brukes til å legge til verdien som skal vises i inndatafeltet, og 'navn' refererer til navnet på inndatafeltet.
' ved trykk ”-hendelsen utløses når brukeren utfører en funksjonalitet ved å klikke på musen:

< skjema id = 'form' >

< inndatatype = 'tekst' Navn = 'Fname' plassholder = 'Skriv inn ditt fornavn' > 

< inndatatype = 'tekst' Navn = 'Lname' plassholder = 'Skriv inn ditt etternavn' > 

< inndatatype = 'Dato' Navn = 'alder' plassholder = 'Skriv inn din alder' > 

< inndatatype = 'knapp' verdi = 'Tast inn' ved trykk = 'data()' >

form >

Deretter får du tilgang til skjemaet i CSS og angi plassen rundt skjemaet:

. form {

margin : 20 piksler ;

polstring : 30 piksler ;

}

Videre, bruk script-taggen og legg til følgende kode:

funksjonsdata ( ) {
var form = dokument. getElementById ( 'form' ) ;
constformData = newFormData ( form ) ;
konsoll. Logg ( 'Skjemadata' ) ;
til ( la obj offormData ) {
konsoll. Logg ( obj ) ;
}
}

I kodebiten ovenfor:

Påkalle ' getElementById(“form”) ” metode for å få tilgang til skjemaet ved å bruke skjema-ID.
Lagre nå det åpnede elementet i en ny konstant ' formData '.
Bruke ' til ” løkke for iterasjon og skriv ut elementene på konsollen.

Produksjon

Du har lært om opprettelsen av FormData-objektet i JavaScript.

Konklusjon

Et FormData-objekt brukes til å bygge en samling av data i JavaScript som kan sendes til serveren. For å lage Formdata-objektet i JavaScript, demonstreres to metoder. Den første bruker enkel JavaScript og den andre er gjennom skjemaoppretting i HTML og koble det til JavaScript. Dette innlegget sa om FormData-objekter i JavaScript.

Hva er et FormData-objekt i JavaScript?