Arbeit mit FormData in JavaScript

Nehmen wir an, wir haben ein bestimmtes Formular:

<form action="/target/" method="POST">
	<input name="test1" value="123">
	<input name="test2" value="456">
	<input type="submit">
</form>

Nehmen wir an, wir möchten die Daten dieses Formulars als Schlüssel-Wert-Paare erhalten. Es ist klar, dass wir dazu eine Schleife durchlaufen und darin das Gewünschte bilden müssen. In JavaScript gibt es jedoch einen einfacheren Weg - man kann ein spezielles Objekt FormData verwenden, das es ermöglicht, die Formulardaten in geordneter Form zu erhalten.

Lassen Sie uns die Arbeit mit diesem Objekt analysieren. Lassen Sie uns zuerst einen Verweis auf unser Formular erhalten:

let form = document.querySelector('form');

Jetzt erstellen wir ein Objekt mit unserem Formular:

let formData = new FormData(form);

Wir können unser Objekt in der Konsole ausgeben, jedoch werden wir bei einer solchen Ausgabe die Formulardaten nicht sehen:

console.log(formData);

Lassen Sie uns unser Objekt in ein Array umwandeln, um die Formulardaten zu sehen:

console.log(Array.from(formData));

Gegeben ist ein Formular mit drei Inputs. Ebenfalls gegeben ist ein Button. Bei Klick auf den Button sollen die Daten des Formulars in Form eines FormData-Objekts abgerufen werden.