Formanın AJAX vasitəsilə FormData JavaScript ilə göndərilməsi

FormData vasitəsilə formanın bütün sahələrini avtomatik olaraq serverə göndərmək olar. Gəlin görək bu necə edilir.

Tutaq ki, bizdə aşağıdakı forma var, burada inputlara name atributları verilib:

<form action="" method="GET">
	<input name="num1">
	<input name="num2">
	<input type="submit">
</form>

Gəlin bu formanı AJAX ilə göndərək. Əvvəlcə formaya istinadı dəyişənə əldə edək:

let form = document.querySelector('form');

İndi sorğunun gövdəsində məlumat kimi FormData obyektini göstərək. Obyektin özünə parametr kimi formaya olan istinadı ötürək:

form.addEventListener('submit', function(event) {
	let promise = fetch('/handler/', {
		method: 'POST',
		body: new FormData(this) // formaya istinadı ötürürük
	});
	
	event.preventDefault();
});

Nəticədə serverdə inputların qiymətlərini onların name atributlarından adları ilə əldə edə bilərik:

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

Rəqəmlərin daxil edildiyi beş inputu olan forma verilib. Bu formanı serverə POST metodu ilə göndərin. Server daxil edilmiş rəqəmlərin ədədi ortasını tapsın və nəticəni brauzerə geri göndərsin.