Denna uppskrivning kommer att demonstrera FormData-objektet i JavaScript med hjälp av de enklaste exemplen.
Vad är ett FormData-objekt i JavaScript?
Ett FormData-objekt är ett populärt sätt att bygga en datasamling i JavaScript som kan skickas till servern med ' XMLHttpRequest ” eller hämtas. Den utför samma funktioner som HTML-formulärelementet. Det kan jämföras med en array av arrayer. En separat array representerar varje element vi vill överföra till servern.
Syntax
För att använda FormData-objektet i JavaScript, använd följande syntax:
konst formData = ny FormData ( ) ;
Exempel 1: Skapa FormData-objekt utan HTML-formulär
Först av allt, initiera en konstant med ett specifikt namn och tilldela ett visst värde till den konstanten. Här, ' new FormData() ” används som ett konstant värde:
Const formData = ny FormData ( ) ;
Lägg sedan till data genom att skicka argumenten i ' bifoga() 'metoden
formData. bifoga ( 'Fname' , 'Officer' ) ;formData. bifoga ( 'Lname' , 'Javed' ) ;
formData. bifoga ( 'ålder' , 25 ) ;
Efter det, använd ' console.log() ' metod:
trösta. logga ( 'Formulär information' ) ;
Använd ' för ” loop för att iterera och visa utdata på konsolen med hjälp av ” console.log() ' metod:
för ( låt obj av formData ) {trösta. logga ( obj ) ;
}
Exempel 2: Skapa FormData-objekt med ett HTML-formulär
För att lägga till FormData med ett HTML-formulär, skapa först ett formulär i HTML med hjälp av ' ' element och lägg till följande attribut som anges nedan:
- För att lägga till inmatningsfältet i formuläret, använd '
' element. - Inuti inmatningstaggen anger du ' typ ”-attribut för att definiera elementets datatyp. Det finns flera möjliga värden för detta attribut, inklusive ' text ”, “ siffra ”, “ datum ”, “ Lösenord ', och många fler.
- den ' Platshållare ” används för att lägga till värdet som ska visas i inmatningsfältet, och ”namn” hänvisar till namnet på inmatningsfältet.
- ' onclick ” händelsen utlöses när användaren utför en funktion genom att klicka på musen:
< ingångstyp = 'text' namn = 'Fname' Platshållare = 'Skriv in ditt förnamn' >< br >< br >
< ingångstyp = 'text' namn = 'Lname' Platshållare = 'Ange ditt efternamn' >< br >< br >
< ingångstyp = 'datum' namn = 'ålder' Platshållare = 'Ange din ålder' >< br >< br >
< ingångstyp = 'knapp' värde = 'Stiga på' onclick = 'data()' >
form >
Öppna sedan formuläret i CSS och ställ in utrymmet runt formuläret:
. form {marginal : 20px ;
stoppning : 30 pixlar ;
}
Använd dessutom script-taggen och lägg till följande kod:
funktionsdata ( ) {var form = dokumentera. getElementById ( 'form' ) ;
constformData = newFormData ( form ) ;
trösta. logga ( 'Formulärdata' ) ;
för ( låt obj offormData ) {
trösta. logga ( obj ) ;
}
}
I kodavsnittet ovan:
- Åberopa ' getElementById(“form”) ”-metod för att komma åt formuläret genom att använda formulär-id.
- Lagra nu det åtkomliga elementet i en ny konstant ' formData ”.
- Använd ' för ” loop för iteration och skriv ut elementen på konsolen.
Produktion
Du har lärt dig om skapandet av FormData-objektet i JavaScript.
Slutsats
Ett FormData-objekt används för att bygga en samling data i JavaScript som kan skickas till servern. För att skapa Formdata-objektet i JavaScript demonstreras två metoder. Den första använder enkel JavaScript och den andra är genom att skapa formulär i HTML och länka det till JavaScript. Det här inlägget skrev om FormData-objekt i JavaScript.