不需要使用XHR或jQuery的现代答案
已经是2022年了，当我们拥有Fetch API和FormData API时，我们不需要使用旧工具如XHR或jQuery！
我们需要做的第一件事是使用event.preventDefault()阻止默认表单提交行为：
form.addEventListener("submit", function(event){
event.preventDefault();
});
现在我们需要用自己的AJAX请求替换提交行为。Fetch API让提交表单数据变得非常简单 - 只需创建一个新的
FormData对象，将其填充为表单的值，并将其用作fetch请求的主体即可：
fetch(form.action, {
method: "post",
body: new FormData(form)
});
请注意，这将使用
multipart/form-data 编码类型提交 HTTP 请求。如果你需要使用
application/x-www-form-urlencoded 格式发布数据，请从
FormData 对象创建一个新的
URLSearchParams 对象，并将其用作 fetch 的主体。
1
fetch(form.action, {
method: "post",
body: new URLSearchParams(new FormData(form))
});
最后，如果您想将HTTP请求提交为JSON，请使用以下内容：2
fetch(form.action, {
method: "post",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(Object.fromEntries(new FormData(form)))
});
这是一个完整的代码示例：
let form = document.querySelector("form");
form.addEventListener("submit", function(event){
event.preventDefault();
fetch(form.action, {
method: "post",
body: new URLSearchParams(new FormData(form))
});
});
<form method="POST">
<input name="name" placeholder="Name" />
<input name="phone" type="tel" placeholder="Phone" />
<input name="email" type="email" placeholder="Email" />
<input name="submit" type="submit" />
</form>
1 这两种编码类型有什么区别？
2 代码基于这个回答中的"How to convert FormData (HTML5 object) to JSON"。请注意，如果键重复，则只使用最后一个值。
<iframe>和target属性来实现。 - alex