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

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});
}

FormData को पुराने XMLHttpRequest के ज़रिए भी भेजा जा सकता है:

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});