Ez az írás bemutatja a FormData objektumot JavaScriptben a legegyszerűbb példák segítségével.
Mi az a FormData objektum a JavaScriptben?
A FormData objektum egy népszerű megközelítés az adatgyűjtemény felépítésére JavaScriptben, amely a ' XMLHttpRequest ” vagy lekérve. Ugyanazokat a funkciókat látja el, mint a HTML űrlapelem. Összehasonlítható egy tömbökkel. Egy külön tömb képvisel minden olyan elemet, amelyet továbbítani szeretnénk a szervernek.
Szintaxis
A FormData objektum JavaScriptben való használatához használja a következő szintaxist:
const formData = új FormData ( ) ;
1. példa: FormData objektum létrehozása HTML űrlap nélkül
Először is inicializáljon egy állandót egy adott névvel, és rendeljen hozzá egy adott értéket. Itt a „ új FormData() ” állandó értékként használatos:
Const formData = új FormData ( ) ;
Ezután fűzze hozzá az adatokat az argumentumok átadásával a ' mellékel() ” módszerrel
formData. mellékel ( 'Fname' , 'Tiszt' ) ;formData. mellékel ( 'Lname' , 'Javed' ) ;
formData. mellékel ( 'kor' , 25 ) ;
Ezt követően használja a „ console.log() ” módszer:
konzol. log ( 'Űrlap információ' ) ;
Használja a ' számára ' ciklus az iterációhoz és a kimenet megjelenítéséhez a konzolon a ' console.log() ” módszer:
számára ( legyen obj of formData ) {konzol. log ( obj ) ;
}
2. példa: FormData objektum létrehozása HTML-űrlappal
A FormData HTML űrlappal történő hozzáadásához először hozzon létre egy űrlapot HTML-ben a „ ” elemet, és adja hozzá az alábbi attribútumot:
- A beviteli mező hozzáadásához az űrlaphoz használja a „
” elemet. - A beviteli címkén belül adja meg a „ típus ” attribútumot az elem adattípusának meghatározásához. Ennek az attribútumnak több értéke is lehetséges, beleértve a ' szöveg ”, „ szám ”, „ dátum ”, „ Jelszó ', és még sok más.
- A ' helykitöltő ” a beviteli mezőben megjelenítendő érték hozzáadására szolgál, a „név” pedig a beviteli mező nevére utal.
- ' kattintásra ” esemény akkor indul el, ha a felhasználó az egér kattintásával végrehajt egy funkciót:
< bemeneti típus = 'szöveg' név = 'Fname' helykitöltő = 'Adja meg a keresztnevét' >< br >< br >
< bemeneti típus = 'szöveg' név = 'Lnév' helykitöltő = 'Adja meg vezetéknevét' >< br >< br >
< bemeneti típus = 'dátum' név = 'kor' helykitöltő = 'Add meg az életkorod' >< br >< br >
< bemeneti típus = 'gomb' érték = 'Belép' kattintásra = 'adat()' >
forma >
Ezután nyissa meg az űrlapot CSS-ben, és állítsa be a szóközt az űrlap körül:
. forma {árrés : 20 képpont ;
párnázás : 30 képpont ;
}
Ezenkívül használja a script címkét, és adja hozzá a következő kódot:
függvényadatok ( ) {forma volt = dokumentum. getElementById ( 'forma' ) ;
constformData = newFormData ( forma ) ;
konzol. log ( 'Űrlapadatok' ) ;
számára ( legyen obj offormData ) {
konzol. log ( obj ) ;
}
}
A fenti kódrészletben:
- Hívd meg a ' getElementById('űrlap') ” metódussal érheti el az űrlapot az űrlapazonosító használatával.
- Most tárolja az elért elemet egy új állandóban ' formData ”.
- Használja a ' számára ” ciklus az iterációhoz, és nyomtassa ki az elemeket a konzolon.
Kimenet
Megtanulta a FormData objektum létrehozását JavaScriptben.
Következtetés
A FormData objektum a szervernek elküldhető adatgyűjtemény létrehozására szolgál JavaScriptben. A Formdata objektum JavaScriptben való létrehozásához két módszert mutatunk be. Az első egyszerű JavaScriptet használ, a második pedig az űrlap létrehozásával HTML-ben és a JavaScript-szel való összekapcsolásán keresztül. Ez a bejegyzés a JavaScript FormData objektumairól szólt.