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 मेथड द्वारा सर्वर पर भेजें। सर्वर दर्ज किए गए नंबरों का अंकगणितीय माध्य ढूंढे और परिणाम ब्राउज़र पर वापस भेजे।