FormData JavaScript көмегімен AJAX арқылы форма жіберу

FormData көмегімен форманың барлық өрістерін серверге автоматты түрде жіберуге болады. Мұны қалай жасауға болатынын қарастырайық.

Бізде келесі форма бар делік, онда input элементтеріне 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();
});

Нәтижесінде серверде біз input элементтерінің мәндерін олардың аттары бойынша name атрибуттарынан ала аламыз:

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

Берілген формада бес input бар, оларға сандар енгізіледі. Бұл форманы серверге POST әдісімен жіберіңіз. Сервер енгізілген сандардың арифметикалық ортасын тауып, нәтижені браузерге қайтарып жіберсін.