পরিদর্শন এবং পরিবর্তনের জন্য ফর্মডেটা পদ্ধতি

Sam Thorogood

FormData হল XHR ব্যবহারকারীর সেরা বন্ধু, এবং এটি Chrome 50-এ একটি আপগ্রেড হচ্ছে৷ আমরা এমন পদ্ধতিগুলি যুক্ত করছি যা আপনাকে আপনার FormData অবজেক্টগুলি পরিদর্শন করতে বা বাস্তবতার পরে সেগুলিকে সংশোধন করার অনুমতি দেয়৷ আপনি এখন get() , delete() , এবং entries , keys , এবং আরও অনেক কিছুর মতো পুনরাবৃত্তি সহায়ক ব্যবহার করতে পারেন৷ ( সম্পূর্ণ তালিকা দেখুন ।)

আপনি যদি ইতিমধ্যেই FormData ব্যবহার না করে থাকেন তবে এটি একটি সহজ, ভাল-সমর্থিত API যা আপনাকে প্রোগ্রাম্যাটিকভাবে একটি ভার্চুয়াল ফর্ম তৈরি করতে এবং window.fetch() বা XMLHttpRequest.send(formData) ব্যবহার করে দূরবর্তী স্থানে পাঠাতে দেয়।

কিছু উদাহরণের জন্য, পড়ুন!

একজন পেশাদার মত বাস্তব ফর্ম পার্স

FormData একটি বাস্তব HTML ফর্ম থেকে তৈরি করা যেতে পারে, এর সমস্ত বর্তমান মানগুলির একটি স্ন্যাপশট নিয়ে৷ যাইহোক, বস্তুটি সম্পূর্ণরূপে অস্বচ্ছ ছিল। আপনি যা করতে পারেন তা হল এটিকে, অপরিবর্তিত, একটি সার্ভারে পাঠাতে। এখন, আপনি এটি নিতে পারেন, এটি পরিবর্তন করতে পারেন, এটিকে বপ করতে পারেন, এটি পর্যবেক্ষণ করতে পারেন, এটি সঙ্কুচিত করতে পারেন, এটি পরিবর্তন করতে পারেন এবং অবশেষে এটি আপলোড করতে পারেন:

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 তৈরি করে থাকেন, তাহলে আপনি এটিকে পুনরায় ব্যবহার করতে না পারায় এটি হতাশাজনক মনে হতে পারে - আপনি সেই ক্ষেত্রগুলিতে অনেক সময় ব্যয় করেছেন! যেহেতু 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});