Denne opskrivning vil demonstrere FormData-objektet i JavaScript ved hjælp af de nemmeste eksempler.
Hvad er et FormData-objekt i JavaScript?
Et FormData-objekt er en populær tilgang til at opbygge en datasamling i JavaScript, der kan sendes til serveren ved hjælp af ' XMLHttpRequest ” eller hentet. Det udfører de samme funktioner som HTML-formularelementet. Det kan sammenlignes med en række arrays. Et separat array repræsenterer hvert element, vi ønsker at overføre til serveren.
Syntaks
For at bruge FormData-objektet i JavaScript skal du bruge følgende syntaks:
konst formData = ny FormData ( ) ;
Eksempel 1: Opret FormData-objekt uden HTML-formular
Først og fremmest skal du initialisere en konstant med et specifikt navn og tildele en bestemt værdi til denne konstant. Her er ' ny FormData() ” bruges som en konstant værdi:
Konst formData = ny FormData ( ) ;
Tilføj derefter dataene ved at sende argumenterne i ' Tilføj() ” metode
formData. Tilføj ( 'Fname' , 'Officer' ) ;formData. Tilføj ( 'Lname' , 'Javed' ) ;
formData. Tilføj ( 'alder' , 25 ) ;
Brug derefter ' console.log() ” metode:
konsol. log ( 'Formularoplysninger' ) ;
Brug ' til ” loop for at gentage og vise output på konsollen ved hjælp af “ console.log() ” metode:
til ( lad obj af formData ) {konsol. log ( obj ) ;
}
Eksempel 2: Opret FormData-objekt med en HTML-formular
For at tilføje FormData med en HTML-formular skal du først oprette en formular i HTML ved hjælp af ' '-element og tilføj følgende attribut, der er angivet nedenfor:
- For at tilføje inputfeltet i formularen skal du bruge ' ' element.
- Inde i input-tagget skal du angive ' type ” attribut for at definere elementets datatype. Der er flere mulige værdier for denne attribut, inklusive ' tekst ', ' nummer ', ' dato ', ' adgangskode ', og mange flere.
- Det ' pladsholder ' bruges til at tilføje den værdi, der skal vises i inputfeltet, og 'navn' henviser til navnet på inputfeltet.
- “ onclick ” hændelse udløses, når brugeren udfører en funktionalitet ved at klikke på musen:
< input type = 'tekst' navn = 'Fnavn' pladsholder = 'Indtast dit fornavn' >< br >< br >
< input type = 'tekst' navn = 'Lname' pladsholder = 'Indtast dit efternavn' >< br >< br >
< input type = 'dato' navn = 'alder' pladsholder = 'Indtast din alder' >< br >< br >
< input type = 'knap' værdi = 'Gå ind' onclick = 'data()' >
form >
Gå derefter til formularen i CSS og indstil pladsen omkring formularen:
. form {margen : 20 px ;
polstring : 30 px ;
}
Derudover skal du bruge script-tagget og tilføje følgende kode:
funktionsdata ( ) {var form = dokument. getElementById ( 'form' ) ;
constformData = newFormData ( form ) ;
konsol. log ( 'Formulardata' ) ;
til ( lad obj offormData ) {
konsol. log ( obj ) ;
}
}
I ovenstående kodestykke:
- Påkald ' getElementById(“form”) ” metode til at få adgang til formularen ved at bruge formularen id.
- Gem nu det tilgåede element i en ny konstant ' formData ”.
- Brug ' til ” sløjfe til iteration og udskriv elementerne på konsollen.
Produktion
Du har lært om oprettelsen af FormData-objektet i JavaScript.
Konklusion
Et FormData-objekt bruges til at bygge en samling af data i JavaScript, som kan sendes til serveren. For at oprette Formdata-objektet i JavaScript demonstreres to metoder. Den første bruger simpel JavaScript, og den anden er gennem oprettelse af formularer i HTML og forbinder den med JavaScript. Dette indlæg angav om FormData-objekter i JavaScript.