用於檢查和修改的 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});
}

您也可以透過舊版 XMLHttpRequest 傳送 FormData：

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