Co to jest obiekt FormData w JavaScript?

Obiekty FormData służą do przechwytywania formularza podczas przesyłania formularza przez pobranie go inną metodą. Aby dodać pola z metodami, możemy albo skonstruować nowy lub najnowszy formularz HTML FormData, albo stworzyć obiekt bez użycia jakichkolwiek formularzy. Dane w polach tekstowych muszą zostać podane po kliknięciu przycisku przesyłania, a JavaScript musi je zidentyfikować i dostarczyć wartości tych zmiennych.

Ten artykuł zademonstruje obiekt FormData w JavaScript za pomocą najprostszych przykładów.

Co to jest obiekt FormData w JavaScript?

Obiekt FormData to popularne podejście do budowania zbioru danych w JavaScript, który można wysłać na serwer za pomocą „ XMLHttpRequest ” lub odzyskane. Pełni te same funkcje, co element formularza HTML. Można to porównać do tablicy tablic. Oddzielna tablica reprezentuje każdy element, który chcemy przesłać na serwer.

Składnia

Aby użyć obiektu FormData w JavaScript, użyj następującej składni:

konst tworzyć dane = nowy Tworzyć dane ( ) ;

Przykład 1: Utwórz obiekt FormData bez formularza HTML

Przede wszystkim zainicjuj stałą o określonej nazwie i przypisz jej określoną wartość. Tutaj ' nowy FormData() ” jest używana jako stała wartość:

Konst tworzyć dane = nowy Tworzyć dane ( ) ;

Następnie dołącz dane, przekazując argumenty w „ dodać() ' metoda

tworzyć dane. dodać ( „Nazwa użytkownika” , 'Oficer' ) ;

tworzyć dane. dodać ( „Nazwa L” , „Javed” ) ;

tworzyć dane. dodać ( 'wiek' , 25 ) ;

Następnie skorzystaj z opcji „ log.konsoli() ' metoda:

konsola. dziennik ( „Informacje o formularzu” ) ;

Użyj ' Do ”, aby iterować i wyświetlać dane wyjściowe na konsoli za pomocą „ log.konsoli() ' metoda:

Do ( niech obiekt formData ) {

konsola. dziennik ( obj ) ;

}

Przykład 2: Utwórz obiekt FormData za pomocą formularza HTML

Aby dodać FormData z formularzem HTML, najpierw utwórz formularz w HTML za pomocą „ ” i dodaj następujący atrybut wymieniony poniżej:

Aby dodać pole wprowadzania w formularzu, użyj opcji „ ' element.
Wewnątrz znacznika wejściowego określ „ typ ”, aby zdefiniować typ danych elementu. Istnieje wiele możliwych wartości tego atrybutu, w tym „ tekst ”, „ numer ”, „ data ”, „ hasło ', i wiele więcej.
„ symbol zastępczy ” służy do dodawania wartości do wyświetlenia w polu wejściowym, a „nazwa” odnosi się do nazwy pola wejściowego.
“ na kliknięcie ” zostaje wywołane, gdy użytkownik wykonuje funkcjonalność poprzez kliknięcie myszką:

< identyfikator formularza = 'formularz' >

< typ wejścia = 'tekst' nazwa = „Nazwa użytkownika” symbol zastępczy = 'Wpisz swoje imię' > 

< typ wejścia = 'tekst' nazwa = „Lnazwa” symbol zastępczy = „Wpisz swoje nazwisko” > 

< typ wejścia = 'data' nazwa = 'wiek' symbol zastępczy = 'Wpisz swój wiek' > 

< typ wejścia = 'przycisk' wartość = 'Wchodzić' na kliknięcie = 'dane()' >

formularz >

Następnie uzyskaj dostęp do formularza w CSS i ustaw przestrzeń wokół formularza:

. formularz {

margines : 20px ;

wyściółka : 30px ;

}

Ponadto użyj tagu script i dodaj następujący kod:

dane funkcji ( ) {
była forma = dokument. getElementById ( 'formularz' ) ;
constformData = nowe dane formularza ( formularz ) ;
konsola. dziennik ( 'Tworzyć dane' ) ;
Do ( niech obiekt offormData ) {
konsola. dziennik ( obj ) ;
}
}

W powyższym fragmencie kodu:

Wywołaj „ getElementById('formularz') ”, aby uzyskać dostęp do formularza za pomocą identyfikatora formularza.
Teraz zapisz element, do którego uzyskano dostęp, w nowej stałej „ tworzyć dane ”.
Użyj ' Do ” do iteracji i wydrukuj elementy na konsoli.

Wyjście

Dowiedziałeś się o tworzeniu obiektu FormData w JavaScript.

Wniosek

Obiekt FormData służy do budowania kolekcji danych w JavaScript, które można wysłać na serwer. Aby utworzyć obiekt Formdata w JavaScript, zademonstrowano dwie metody. Pierwsza polega na użyciu prostego JavaScript, a druga na stworzeniu formularza w HTML i powiązaniu go z JavaScript. Ten post dotyczył obiektów FormData w JavaScript.

Co to jest obiekt FormData w JavaScript?