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});
}
您还可以通过旧版 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});