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