Travailler avec FormData en JavaScript

Supposons que nous ayons un formulaire :

html<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 :

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

Maintenant, créons un objet avec notre formulaire :

javascriptlet 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 :

javascriptconsole.log(formData);

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

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