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:

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

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

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

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

Dato un modulo con cinque input, in cui vengono inseriti numeri. Invia questo modulo al server con il metodo POST. Lascia che il server trovi la media aritmetica dei numeri inseriti e invii il risultato al browser.