Lavorare con FormData in JavaScript

Supponiamo di avere un modulo:

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

Supponiamo di voler ottenere i dati di questo modulo in forma di coppie chiave-valore. È chiaro, che per farlo dovremmo eseguire un ciclo e al suo interno formare ciò che desideriamo. In JavaScript, comunque, esiste un modo più semplice - si può utilizzare un oggetto speciale FormData, che permette di ottenere in modo ordinato i dati del modulo.

Analizziamo come lavorare con questo oggetto. Per iniziare, otteniamo un riferimento al nostro modulo:

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

Ora creiamo un oggetto con il nostro modulo:

javascriptlet formData = new FormData(form);

Possiamo stampare il nostro oggetto nella console, tuttavia con tale output non vedremo i dati del modulo:

javascriptconsole.log(formData);

Convertiamo il nostro oggetto in un array, per vedere i dati del modulo:

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