फ़ॉर्म डेटा की जांच और उसमें बदलाव करने के तरीके

Sam Thorogood

FormData, XHR उपयोगकर्ता का सबसे अच्छा दोस्त है और इसे Chrome 50 में अपग्रेड करने का विकल्प मिल रहा है. हम ऐसे तरीके जोड़ रहे हैं जिनसे आप अपने FormData ऑब्जेक्ट की जांच कर सकें या तथ्यों के बाद उनमें बदलाव कर सकें. अब get(), delete(), और इटरेशन हेल्पर जैसे entries, keys वगैरह का इस्तेमाल किया जा सकता है. (पूरी सूची देखें.)

अगर आपने पहले से FormData इस्तेमाल नहीं किया है, तो यह बेहतर तरीके से काम करने वाला एपीआई है. इसकी मदद से, प्रोग्राम बनाकर वर्चुअल फ़ॉर्म बनाया जा सकता है और उसे 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);

अपने FormData को तुरंत शेयर न करें

अगर आपको अपना 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});