FormData JavaScript ёрдамида AJAX воситасида форма жўнатиш

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 методи билан серверга жўнатинг. Сервер киритилган сонларнинг ўртача арифметигини топсин ва натижани браузерга қайтарсин.