طرق الفحص والتعديل في FormData

سام ثوروغود

Twitter GitHub تأثير اهتزاز الصفحة الرئيسية

FormData هو الصديق المفضّل لمستخدم XHR، ويتم ترقيته في Chrome 50. نحن بصدد إضافة طُرق تتيح لك فحص عناصر FormData أو تعديلها بعد حدوثها. يمكنك الآن استخدام get() وdelete() وأدوات المساعدة المتعلّقة بالتكرار، مثل entries وkeys وغيرها. (اطّلِع على القائمة الكاملة.)

إذا لم تكن تستخدم FormData، فهي واجهة برمجة تطبيقات بسيطة ومتوافقة بشكل جيد تسمح لك بإنشاء نموذج افتراضي بشكل آلي وإرساله إلى مكان بعيد باستخدام 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});