Envoi de formulaire via AJAX avec FormData JavaScript

Avec FormData il est possible d'envoyer automatiquement tous les champs d'un formulaire au serveur. Voyons comment cela se fait.

Supposons que nous ayons le formulaire suivant, dans lequel les inputs ont des attributs name :

<form action="" method="GET">
	<input name="num1">
	<input name="num2">
	<input type="submit">
</form>

Envoyons ce formulaire via AJAX. Pour commencer, récupérons une référence au formulaire dans une variable :

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

Maintenant, dans le corps de la requête, spécifions comme données un objet FormData. Et passons en paramètre à cet objet une référence au formulaire :

form.addEventListener('submit', function(event) {
	let promise = fetch('/handler/', {
		method: 'POST',
		body: new FormData(this) // on passe la référence au formulaire
	});
	
	event.preventDefault();
});

En conséquence, sur le serveur, nous pourrons récupérer les valeurs des inputs par leurs noms issus des attributs name :

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

Un formulaire avec cinq inputs, dans lesquels des nombres sont saisis, est donné. Envoyez ce formulaire au serveur en utilisant la méthode POST. Que le serveur calcule la moyenne arithmétique des nombres saisis et renvoie le résultat au navigateur.