שיטות של FormData לבדיקה ולשינוי

סאם ת'ורוגו

Twitter GitHub Glitch דף הבית

FormData הוא החבר הכי טוב של משתמש XHR, והוא עובר שדרוג ב-Chrome 50. אנחנו מוסיפים שיטות שמאפשרות לבדוק אובייקטים של FormData או לשנות אותם לאחר מעשה. עכשיו אפשר להשתמש ב-get(), ב-delete() ובכלי עזר לביצוע איטרציה, כמו entries, keys ועוד. (לעיון ברשימה המלאה).

אם אתם עדיין לא משתמשים ב-FormData, זהו ממשק API פשוט נתמך היטב שמאפשר לכם לבנות טופס וירטואלי באופן פרוגרמטי ולשלוח אותו למקום רחוק באמצעות window.fetch() או XMLHttpRequest.send(formData).

כדי לראות כמה דוגמאות, המשיכו לקרוא!

נתחו טפסים אמיתיים כמו מקצוענים

ניתן לבנות את FormData מטופס HTML אמיתי, תוך יצירת תמונת מצב של כל הערכים הנוכחיים שלו. עם זאת, האובייקט היה בעבר אטום לחלוטין. כל מה שיכולת לעשות הוא לשלוח אותה לשרת, ללא שינוי. עכשיו אפשר לקחת אותו, לשנות אותו, לסמן אותו ב-bop, לצפות בו, לכווץ אותו, לשנות אותו, ולבסוף, להעלות אותו:

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