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');

Ҳоло дар бадаи дархост (body) ҳамчун маълумот объекти 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 бифиристед. Бигзор сервер миёнаи арифметикии рақамҳои воридшударо ёбад ва натиҷаро ба браузер баргардонад.