FormData XHR उपयोगकर्ता का सबसे अच्छा दोस्त है और इसे Chrome 50 में अपग्रेड किया जा रहा है.
हम ऐसे तरीके जोड़ रहे हैं जिनकी मदद से, आप अपने FormData ऑब्जेक्ट की जांच कर सकते हैं या तथ्यों के बाद उनमें बदलाव कर सकते हैं.
अब get(), delete(), और इटरेशन में मदद करने वाले entries, keys वगैरह जैसे टूल का इस्तेमाल किया जा सकता है. (पूरी सूची देखें.)
अगर Forms का इस्तेमाल पहले से नहीं किया जा रहा है, तो यह एक आसान और बेहतर तरीके से काम करने वाला API है. इससे, प्रोग्राम के हिसाब से, window.fetch() या XMLHttpRequest.send(formData) का इस्तेमाल करके, वर्चुअल फ़ॉर्म बनाया जा सकता है और उसे किसी दूर की जगह पर भेजा जा सकता है.
कुछ उदाहरण पढ़ने के लिए, आगे पढ़ें!
असली फ़ॉर्म को किसी पेशेवर की तरह पार्स करें
FormData को असली एचटीएमएल फ़ॉर्म से बनाया जा सकता है. इसमें अपनी मौजूदा वैल्यू का स्नैपशॉट लिया जा सकता है.
हालांकि, पहले यह ऑब्जेक्ट पूरी तरह से ओपेक हुआ करता था. आप बस उसे बिना किसी बदलाव के सर्वर पर भेज सकते थे.
अब, आप इसे ले सकते हैं, इसमें बदलाव कर सकते हैं, इसे देख सकते हैं, इसे देख सकते हैं, छोटा कर सकते हैं, बदल सकते हैं, और आखिर में इसे अपलोड कर सकते हैं:
function sendRequest(theFormElement) {
var formData = new FormData(theFormElement);
formData.delete("secret_user_data"); // don't include this one!
if (formData.has("include_favorite_color")) {
formData.set("color", userPrefs.getColor());
}
// log all values like <input name="widget">
console.info("User selected widgets", formData.getAll("widget"));
window.fetch(url, {method: 'POST', body: formData});
}
आपके पास पुराने XMLHttpRequest से भी FormData भेजने का विकल्प है:
var x = new XMLHttpRequest();
x.open('POST', url);
x.send(formData);
अपना FormsData न इस्तेमाल करें
अगर आपको अपना FormData नए सिरे से बनाना है, तो हो सकता है कि आप इसे फिर से इस्तेमाल न कर पाएं. आपने इस वजह से, उन फ़ील्ड में काफ़ी समय बिताया है!
window.fetch() और XMLHttpRequest.send(), दोनों तरीके FormData का स्नैपशॉट लेते हैं. इसलिए, अब सुरक्षित तरीके से अपने काम को फिर से इस्तेमाल किया जा सकता है और उसमें बदलाव किया जा सकता है!
यह उदाहरण देखें:
// append allows multiple values for the same key
var formData = new FormData();
formData.append("article", "id-123");
formData.append("article", "id-42");
// send like request
formData.set("action", "like");
window.fetch(url, {method: 'POST', body: formData});
// send reshare request
formData.set("action", "reshare"); // overrides previous "action"
window.fetch(url, {method: 'POST', body: formData});