روش های FormData برای بازرسی و اصلاح

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

همچنین می توانید 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});