Co to jest obiekt FormData w JavaScript?

Obiekty formData są używane do przechwytywania formularza podczas przesłania formularza poprzez pobieranie go inną metodą. Aby dodać pola metodami, możemy skonstruować nowy lub najnowszy formularz FormData HTML lub stworzyć obiekt bez użycia jakichkolwiek formularzy. Dane w polach tekstowych należy podać po kliknięciu przycisku przesłania, a JavaScript musi je zidentyfikować i dostarczyć te wartości zmienne.

Ten zapis pokaże obiekt FormData w JavaScript za pomocą najłatwiejszych przykładów.

Co to jest obiekt FormData w JavaScript?

Obiekt FormData jest popularnym podejściem do budowania kolekcji danych w JavaScript, który można wysłać do serwera za pomocą „Xmlhttprequest”Lub odzyskane. Wykonuje te same funkcje, co element formularza HTML. Można to porównać do szeregu tablic. Oddzielna tablica reprezentuje każdy element, który chcemy przesyłać na serwer.

Składnia

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

const formdata = new FormData ();

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

Przede wszystkim zainicjuj stałą o określonej nazwie i przypisz konkretną wartość tej stałej. Tutaj "Nowa formData ()”Jest wykorzystywany jako stała wartość:

Const formdata = new FormData ();

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

tworzyć dane.append („fname”, „hafsa”);
tworzyć dane.append („lname”, „Javed”);
tworzyć dane.append („wiek”, 25);

Następnie użyj „konsola.dziennik()" metoda:

konsola.log („Informacje o formularzu”);

Użyj "Do„Pętla, aby iterować i wyświetlić dane wyjściowe na konsoli za pomocą„konsola.dziennik()" metoda:

dla (niech obj formdata)
konsola.log (OBJ);

Przykład 2: Utwórz obiekt FormData z formą HTML

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

• Aby dodać pole wejściowe w formularzu, użyj „" element.
• Wewnątrz znacznika wejściowego określ „typ”Atrybut definiowania typu danych elementu. Istnieje wiele możliwych wartości dla tego atrybutu, w tym „tekst”,„numer”,„data”,„hasło", i wiele więcej.
• „„symbol zastępczy”Służy do dodania wartości do wyświetlania w polu wejściowym, a„ nazwa ”odnosi się do nazwy pola wejściowego.
• "na kliknięcie„Wydarzenie uruchamia się, gdy użytkownik wykonuje funkcjonalność, klikając myszą:

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

.formularz
Margines: 20px;
Wyściółka: 30px;

Ponadto użyj znacznika skryptu i dodaj następujący kod:

funkcjaData ()
var form = dokument.getElementById („Form”);
constFormData = newformData (formularz);
konsola.log („Dane formularza”);
dla (niech obj offormdata)
konsola.log (OBJ);

W powyższym fragmencie kodu:

• Wywołać „getElementById („forma”)„Metoda dostępu do formularza za pomocą identyfikatora formularza.
• Teraz przechowuj dostęp do nowej stałej ”tworzyć dane".
• Użyj "Do„Pętla do iteracji i wydrukuj elementy na konsoli.

Wyjście

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

Wniosek

Obiekt FormData jest używany do budowania zbioru danych w JavaScript, który można wysłać na serwer. Aby utworzyć obiekt FormData w JavaScript, wykazano dwie metody. Pierwszy używa prostego JavaScript, a drugi jest poprzez tworzenie formularza w HTML i łączenie go z JavaScript. Ten post stwierdzono o obiektach FormData w JavaScript.