Envío de formulario a través de AJAX usando FormData JavaScript

Usando FormData puedes enviar automáticamente todos los campos del formulario al servidor. Veamos cómo se hace.

Supongamos que tenemos el siguiente formulario, donde a los inputs se les han dado atributos name:

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

Enviemos este formulario a través de AJAX. Para empezar, obtengamos una referencia al formulario en una variable:

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

Ahora, en el cuerpo de la solicitud, como datos especificamos el objeto FormData. Y al propio objeto le pasamos como parámetro la referencia al formulario:

public/client.jsform.addEventListener('submit', function(event) {
  let promise = fetch('/handler/', {
    method: 'POST',
    body: new FormData(this) // pasamos la referencia al formulario
  });
  
  event.preventDefault();
});

Como resultado, en el servidor podremos obtener los valores de los inputs por sus nombres desde los atributos name:

server.jsexport default {
  '/handler/': function({post}) {
    console.log(post.num1);
    console.log(post.num2);
    return 'form data received';
  }
}