Испраќање на форма преку AJAX со FormData JavaScript

Со помош на FormData може автоматски да се испратат сите полиња на формата на серверот. Ајде да погледнеме како се прави ова.

Нека имаме следнава форма, во која на инпутите се дадени атрибути 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();
});

Како резултат на серверот ќе можеме да ги добиеме вредностите на инпутите според нивните имиња од атрибутите name:

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

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