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:

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

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

form.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:

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

Se da un formulario con cinco inputs, en los cuales se introducen números. Envía este formulario al servidor por el método POST. Deja que el servidor encuentre la media aritmética de los números introducidos y envíe el resultado de vuelta al navegador.