Travailler avec FormData en JavaScript

Supposons que nous ayons un formulaire :

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

Supposons que nous voulions obtenir les données de ce formulaire sous forme de paires clé-valeur. Il est clair que pour cela, nous devrons exécuter une boucle et y former ce que nous souhaitons. En JavaScript, cependant, il existe un moyen plus simple - on peut utiliser un objet spécial FormData, permettant d'obtenir les données du formulaire de manière ordonnée.

Analysons le travail avec cet objet. Pour commencer, obtenons une référence à notre formulaire :

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

Maintenant, créons un objet avec notre formulaire :

let formData = new FormData(form);

On peut afficher notre objet dans la console, cependant lors d'un tel affichage, nous ne verrons pas les données du formulaire :

console.log(formData);

Transformons notre objet en tableau pour voir les données du formulaire :

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

Un formulaire avec trois champs de saisie est donné. Un bouton est également donné. Lorsque vous cliquez sur le bouton, récupérez les données du formulaire sous la forme d'un objet FormData.