FormData JavaScript yordamida AJAX orqali formani yuborish

FormData yordamida forma maydonlarini avtomatik ravishda serverga yuborish mumkin. Keling, buni qanday qilishni ko'rib chiqaylik.

Faraz qilaylik, bizda quyidagi forma mavjud bo'lib, unda inputlarga name atributlari berilgan:

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

Keling, ushbu formani AJAX orqali yuboraylik. Boshlash uchun formaga havolani o'zgaruvchiga olaylik:

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

Endi so'rov tana qismida ma'lumot sifatida FormData obyektini ko'rsatamiz. O'ziga obyekt parametri sifatida formaga havolani uzatamiz:

form.addEventListener('submit', function(event) {
	let promise = fetch('/handler/', {
		method: 'POST',
		body: new FormData(this) // formaga havolani uzatamiz
	});
	
	event.preventDefault();
});

Natijada, serverda biz inputlarning qiymatlarini ularning name atributlaridagi nomlari bilan olishimiz mumkin:

export default {
	'/handler/': function({post}) {
		console.log(post.num1);
		console.log(post.num2);
		return 'form ma\'lumotlari qabul qilindi';
	}
}

Raqam kiritiladigan beshta inputli forma berilgan. Ushbu formani POST metodi bilan serverga yuboring. Server kiritilgan raqamlarning o'rta arifmetigini topsin va natijani brauzerga qaytarsin.