שיטות של 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(), יוצרות קובץ snapshot של 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});