使用 JavaScript 发送表单

关联 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 实例。