Dieser Artikel demonstriert das FormData-Objekt in JavaScript anhand der einfachsten Beispiele.
Was ist ein FormData-Objekt in JavaScript?
Ein FormData-Objekt ist ein beliebter Ansatz zum Erstellen einer Datensammlung in JavaScript, die mit „ XMLHttpRequest “ oder abgerufen. Es führt dieselben Funktionen aus wie das HTML-Formularelement. Es kann mit einem Array von Arrays verglichen werden. Ein separates Array stellt jedes Element dar, das wir an den Server übertragen möchten.
Syntax
Um das FormData-Objekt in JavaScript zu verwenden, verwenden Sie die folgende Syntax:
konst Formulardaten = neu Formulardaten ( ) ;
Beispiel 1: FormData-Objekt ohne HTML-Formular erstellen
Initialisieren Sie zunächst eine Konstante mit einem bestimmten Namen und weisen Sie dieser Konstante einen bestimmten Wert zu. Hier das ' neue Formulardaten() “ wird als konstanter Wert verwendet:
Konst Formulardaten = neu Formulardaten ( ) ;
Als nächstes fügen Sie die Daten an, indem Sie die Argumente im „ anhängen () ' Methode
Formulardaten. anhängen ( 'Fname' , 'Offizier' ) ;Formulardaten. anhängen ( 'Lname' , 'Javed' ) ;
Formulardaten. anhängen ( 'Alter' , 25 ) ;
Verwenden Sie danach die „ Konsole.log() ' Methode:
Konsole. Protokoll ( 'Formularinformationen' ) ;
Verwenden Sie das „ für “-Schleife zum Iterieren und Anzeigen der Ausgabe auf der Konsole mit Hilfe der „ Konsole.log() ' Methode:
für ( let obj von formData ) {Konsole. Protokoll ( obj ) ;
}
Beispiel 2: Erstellen Sie ein FormData-Objekt mit einem HTML-Formular
Um die FormData mit einem HTML-Formular hinzuzufügen, erstellen Sie zunächst ein Formular in HTML mit Hilfe des „
- Um das Eingabefeld im Formular hinzuzufügen, verwenden Sie das „
' Element. - Geben Sie im Eingabe-Tag das „ Typ ”-Attribut, um den Datentyp des Elements zu definieren. Es gibt mehrere mögliche Werte für dieses Attribut, einschließlich „ Text “, „ Nummer “, „ Datum “, „ Passwort ', und viele mehr.
- Der ' Platzhalter “ wird verwendet, um den Wert hinzuzufügen, der im Eingabefeld angezeigt werden soll, und „Name“ bezieht sich auf den Namen des Eingabefelds.
- „ anklicken ”-Ereignis wird ausgelöst, wenn der Benutzer eine Funktion durch Klicken mit der Maus ausführt:
< Eingabetyp = 'Text' Name = 'Fname' Platzhalter = 'Geben Sie Ihren Vornamen ein' >< Br >< Br >
< Eingabetyp = 'Text' Name = 'Lname' Platzhalter = 'Geben Sie Ihren Nachnamen ein' >< Br >< Br >
< Eingabetyp = 'Datum' Name = 'Alter' Platzhalter = 'Gebe Dein Alter ein' >< Br >< Br >
< Eingabetyp = 'Taste' Wert = 'Eingeben' anklicken = 'Daten()' >
form >
Greifen Sie als Nächstes in CSS auf das Formular zu und legen Sie den Abstand um das Formular fest:
. form {Rand : 20px ;
Polsterung : 30px ;
}
Verwenden Sie außerdem das script-Tag und fügen Sie den folgenden Code hinzu:
Funktionsdaten ( ) {Form war = dokumentieren. getElementById ( 'form' ) ;
constformData = neueFormulardaten ( form ) ;
Konsole. Protokoll ( 'Formulardaten' ) ;
für ( lass obj offormData ) {
Konsole. Protokoll ( obj ) ;
}
}
Im obigen Code-Snippet:
- Rufen Sie das „ getElementById(“Formular”) ”-Methode für den Zugriff auf das Formular unter Verwendung der Formular-ID.
- Speichern Sie nun das aufgerufene Element in einer neuen Konstante „ Formulardaten “.
- Verwenden Sie das „ für ” Schleife für die Iteration und drucke die Elemente auf der Konsole aus.
Ausgang
Sie haben die Erstellung des FormData-Objekts in JavaScript kennengelernt.
Abschluss
Ein FormData-Objekt wird zum Erstellen einer Datensammlung in JavaScript verwendet, die an den Server gesendet werden kann. Um das Formdata-Objekt in JavaScript zu erstellen, werden zwei Methoden demonstriert. Die erste verwendet einfaches JavaScript und die zweite die Formularerstellung in HTML und die Verknüpfung mit JavaScript. In diesem Beitrag ging es um FormData-Objekte in JavaScript.