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
,可能會發現無法重複使用。您已花費許多時間處理這些欄位!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});