关联 FormData 对象和
表单包含一个文本输入、一个文件输入和一个提交按钮。
JavaScript 如下：
jsconst form = document.querySelector("#userinfo");
async function sendData() {
// 将 FormData 对象与表单元素关联起来
const formData = new FormData(form);
try {
const response = await fetch("https://example.org/post", {
method: "POST",
// 将 FormData 实例设置为请求正文
body: formData,
});
console.log(await response.json());
} catch (e) {
console.error(e);
}
}
// 接管表单提交
form.addEventListener("submit", (event) => {
event.preventDefault();
sendData();
});
为表单元素添加了一个提交事件处理程序。首先调用 preventDefault() 阻止浏览器内置的表单提交，这样我们就可以接手了。然后，调用 sendData() 来获取表单元素并将其传递给 FormData 构造函数。
之后，我们使用 fetch() 以 HTTP POST 请求的形式发送 FormData 实例。