Invio di moduli via AJAX utilizzando FormData JavaScript

Utilizzando FormData è possibile inviare automaticamente tutti i campi del modulo al server. Vediamo come si fa.

Supponiamo di avere il seguente modulo, a cui gli input hanno gli attributi name:

public/index.html<form action="" method="GET">
  <input name="num1">
  <input name="num2">
  <input type="submit">
</form>

Inviiamo questo modulo via AJAX. Per prima cosa, otteniamo un riferimento al modulo in una variabile:

public/client.jslet form = document.querySelector('form');

Ora, nel corpo della richiesta, come dati specifichiamo l'oggetto FormData. E all'oggetto stesso passiamo come parametro il riferimento al modulo:

public/client.jsform.addEventListener('submit', function(event) {
  let promise = fetch('/handler/', {
    method: 'POST',
    body: new FormData(this) // passiamo il riferimento al modulo
  });
  
  event.preventDefault();
});

Di conseguenza, sul servero potremo ottenere i valori degli input tramite i loro nomi dagli attributi name:

server.jsexport default {
  '/handler/': function({post}) {
    console.log(post.num1);
    console.log(post.num2);
    return 'dati del modulo ricevuti';
  }
}