Изпращане на форма чрез AJAX с FormData JavaScript

С помощта на FormData може автоматично да изпратите всички полета на формата към сървъра. Нека да видим как се прави това.

Нека имаме следната форма, в която inputs са дадени атрибути name:

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

Нека да изпратим тази форма чрез AJAX. За начало вземете референция към формата в променлива:

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

Сега в тялото на заявката като данни посочете обект FormData. На самия обект като параметър подайте референция към формата:

form.addEventListener('submit', function(event) {
	let promise = fetch('/handler/', {
		method: 'POST',
		body: new FormData(this) // подаваме референция към формата
	});
	
	event.preventDefault();
});

В резултат на сървъра ще можем да получим стойностите на inputs по техните имена от атрибутите name:

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

Дадена е форма с пет inputs, в които се въвеждат числа. Изпратете тази форма към сървъра с метод POST. Нека сървърът намери средноаритметичното на въведените числа и изпрати резултата обратно към браузъра.