FormData JavaScript का उपयोग करके AJAX के माध्यम से फॉर्म सबमिशन

FormData की सहायता से फॉर्म के सभी फ़ील्ड्स को स्वचालित रूप से सर्वर पर भेजा जा सकता है। आइए देखें कि यह कैसे किया जाता है।

मान लीजिए कि हमारे पास निम्नलिखित फॉर्म है, जिसमें इनपुट को name विशेषताएं दी गई हैं:

public/index.html<form action="" method="GET">
  <input name="num1">
  <input name="num2">
  <input type="submit">
</form>

आइए इस फॉर्म को AJAX के माध्यम से भेजते हैं। सबसे पहले एक वेरिएबल में फॉर्म का लिंक प्राप्त करते हैं:

public/client.jslet form = document.querySelector('form');

अब रिक्वेस्ट के बॉडी में डेटा के रूप में FormData ऑब्जेक्ट निर्दिष्ट करते हैं। और स्वयं ऑब्जेक्ट को पैरामीटर के रूप में फॉर्म का लिंक पास करते हैं:

public/client.jsform.addEventListener('submit', function(event) {
  let promise = fetch('/handler/', {
    method: 'POST',
    body: new FormData(this) // फॉर्म का लिंक पास कर रहे हैं
  });
  
  event.preventDefault();
});

परिणामस्वरूप, सर्वर पर हम name विशेषताओं से उनके नामों के आधार पर इनपुट के मान प्राप्त कर सकेंगे:

server.jsexport default {
  '/handler/': function({post}) {
    console.log(post.num1);
    console.log(post.num2);
    return 'form data received';
  }
}