Co je objekt FormData v JavaScriptu?

Objekty FormData se používají k zachycení formuláře při odesílání formuláře jeho načtením jinou metodou. Abychom mohli přidat pole s metodami, můžeme buď vytvořit nový nebo nejnovější formulář FormData HTML nebo vytvořit objekt bez použití jakýchkoli formulářů. Data v textových polích musí být poskytnuta při kliknutí na tlačítko Odeslat a JavaScript je musí identifikovat a doručit tyto hodnoty proměnných.

Tento zápis předvede objekt FormData v JavaScriptu pomocí nejjednodušších příkladů.

Co je objekt FormData v JavaScriptu?

Objekt FormData je populární přístup k vytváření kolekce dat v JavaScriptu, kterou lze odeslat na server pomocí „ XMLHttpRequest “ nebo načteno. Provádí stejné funkce jako formulářový prvek HTML. Lze to přirovnat k řadě polí. Samostatné pole představuje každý prvek, který chceme přenést na server.

Syntax

Chcete-li použít objekt FormData v JavaScriptu, použijte následující syntaxi:

konst formData = Nový FormData ( ) ;

Příklad 1: Vytvořte objekt FormData bez formuláře HTML

Nejprve inicializujte konstantu s konkrétním názvem a přiřaďte jí konkrétní hodnotu. Zde, „ new FormData() ” se používá jako konstantní hodnota:

Const formData = Nový FormData ( ) ;

Dále připojte data předáním argumentů v „ připojit() “ metoda

formData. připojit ( 'Fname' , 'Důstojník' ) ;

formData. připojit ( 'jméno' , 'Javed' ) ;

formData. připojit ( 'stáří' , 25 ) ;

Poté použijte „ console.log() “ metoda:

řídicí panel. log ( 'Informace z formuláře' ) ;

Použijte „ pro ” smyčka pro iteraci a zobrazení výstupu na konzole pomocí “ console.log() “ metoda:

pro ( let obj of formData ) {

řídicí panel. log ( obj ) ;

}

Příklad 2: Vytvoření objektu FormData pomocí formuláře HTML

Chcete-li přidat FormData s formulářem HTML, nejprve vytvořte formulář v HTML pomocí „ ” a přidejte následující atribut uvedený níže:

Chcete-li do formuláře přidat vstupní pole, použijte „ prvek.
Uvnitř vstupní značky zadejte „ typ ” pro definování datového typu prvku. Pro tento atribut existuje několik možných hodnot, včetně „ text “, “ číslo “, “ datum “, “ Heslo ', a mnoho dalších.
' zástupný symbol “ se používá k přidání hodnoty, která se má zobrazit ve vstupním poli, a „název“ odkazuje na název vstupního pole.
“ při kliknutí ” událost se spustí, když uživatel provede funkci kliknutím myši:

< ID formuláře = 'formulář' >

< Typ vstupu = 'text' název = 'Fname' zástupný symbol = 'Zadejte své křestní jméno' < br < br >

< Typ vstupu = 'text' název = 'jméno' zástupný symbol = 'Zadejte své příjmení' < br < br >

< Typ vstupu = 'datum' název = 'stáří' zástupný symbol = 'Zadejte svůj věk' < br < br >

< Typ vstupu = 'knoflík' hodnota = 'Vstup' při kliknutí = 'data()' >

formulář >

Dále otevřete formulář v CSS a nastavte prostor kolem formuláře:

. formulář {

okraj : 20 pixelů ;

vycpávka : 30 pixelů ;

}

Dále použijte značku skriptu a přidejte následující kód:

funkční data ( ) {
byla forma = dokument. getElementById ( 'formulář' ) ;
constformData = newFormData ( formulář ) ;
řídicí panel. log ( 'Data formuláře' ) ;
pro ( let obj offormData ) {
řídicí panel. log ( obj ) ;
}
}

Ve výše uvedeném úryvku kódu:

Vyvolejte „ getElementById('formulář') ” pro přístup k formuláři pomocí ID formuláře.
Nyní uložte zpřístupněný prvek do nové konstanty „ formData “.
Použijte „ pro ” smyčku pro iteraci a vytiskněte prvky na konzole.

Výstup

Dozvěděli jste se o vytvoření objektu FormData v JavaScriptu.

Závěr

Objekt FormData se používá k vytvoření kolekce dat v JavaScriptu, která lze odeslat na server. Pro vytvoření objektu Formdata v JavaScriptu jsou ukázány dvě metody. První z nich je pomocí jednoduchého JavaScriptu a druhý pomocí vytvoření formuláře v HTML a jeho propojení s JavaScriptem. Tento příspěvek uvádí objekty FormData v JavaScriptu.

Co je objekt FormData v JavaScriptu?