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

Sam Thorogood

FormData هو أفضل صديق لمستخدِم بروتوكول XHR، وسيتم ترقيته في الإصدار 50 من Chrome. نحن بصدد إضافة طرق تتيح لك فحص عناصر 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});