ფორმის 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');

ახლა მოთხოვნის სხეულში, როგორც მონაცემები, მივუთითოთ ობიექტი 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 მეთოდით. დაე, სერვერმა იპოვოს შეყვანილი რიცხვების საშუალო არითმეტიკული და დააბრუნოს შედეგი ბრაუზერში.