JavaScript में FormData के साथ कार्य

मान लीजिए हमारे पास एक फॉर्म है:

<form action="/target/" method="POST">
	<input name="test1" value="123">
	<input name="test2" value="456">
	<input type="submit">
</form>

मान लीजिए हम इस फॉर्म का डेटा कुंजी-मान जोड़े के रूप में प्राप्त करना चाहते हैं। यह स्पष्ट है कि इसे प्राप्त करने के लिए हमें एक लूप चलाना होगा और उसमें वांछित डेटा बनाना होगा। हालांकि, JavaScript में, एक आसान तरीका मौजूद है - हम एक विशेष ऑब्जेक्ट FormData का उपयोग कर सकते हैं, जो फॉर्म का डेटा एक क्रमबद्ध तरीके से प्राप्त करने की अनुमति देता है।

आइए इस ऑब्जेक्ट के साथ कार्य करना समझते हैं। सबसे पहले, अपने फॉर्म का संदर्भ प्राप्त करें:

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

अब हमारे फॉर्म के साथ एक ऑब्जेक्ट बनाएं:

let formData = new FormData(form);

हम अपने ऑब्जेक्ट को कंसोल में प्रिंट कर सकते हैं, हालांकि ऐसा करने पर हमें फॉर्म का डेटा दिखाई नहीं देगा:

console.log(formData);

फॉर्म का डेटा देखने के लिए अपने ऑब्जेक्ट को एक ऐरे में बदलें:

console.log(Array.from(formData));

तीन इनपुट वाला एक फॉर्म दिया गया है। एक बटन भी दिया गया है। बटन पर क्लिक करने पर, फॉर्म का डेटा FormData ऑब्जेक्ट के रूप में प्राप्त करें।