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 পদ্ধতি ব্যবহার করে এই ফর্মটি সার্ভারে পাঠান। সার্ভার যেন ইনপুট করা সংখ্যাগুলির গাণিতিক গড় বের করে এবং ফলাফল ব্রাউজারে ফেরত পাঠায়।