Wysyłanie formularza przez AJAX za pomocą FormData JavaScript

Za pomocą FormData można automatycznie wysłać wszystkie pola formularza na serwer. Zobaczmy, jak to się robi.

Załóżmy, że mamy następujący formularz, w którym inputom nadano atrybuty name:

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

Wyślijmy ten formularz przez AJAX. Na początek pobierzmy referencję do formularza do zmiennej:

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

Teraz w ciele żądania jako dane wskażemy obiekt FormData. A samemu obiektowi jako parametr przekażemy referencję do formularza:

form.addEventListener('submit', function(event) {
	let promise = fetch('/handler/', {
		method: 'POST',
		body: new FormData(this) // przekazujemy referencję do formularza
	});
	
	event.preventDefault();
});

W rezultacie na serwerze będziemy mogli uzyskać wartości inputów po ich nazwach z atrybutów name:

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

Dany jest formularz z pięcioma inputami, do których wprowadzane są liczby. Wyślij ten formularz na serwer metodą POST. Niech serwer znajdzie średnią arytmetyczną wprowadzonych liczb i wyśle wynik z powrotem do przeglądarki.