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 'форманын маалыматтары кабыл алынды';
	}
}

Берилген формада беш input бар, аларга сандар киргизилет. Бул форманы POST методу менен серверге жөнөтүңүз. Сервер киргизилген сандардын орточо арифметикалык маанисин таап, натыйжаны браузерге кайтарып жөнөтсүн.