异步提交必须用JavaScript绕开原生机制，因form的action和method仅支持同步跳转；正确做法是移除二者，用FormData+fetch手动收发数据并处理响应。
form 异步提交不是靠 action 和 method 实现的——这两个属性只管同步提交，设了就必然整页跳转或刷新。想不刷新页面、不重载 DOM、还能拿响应数据做交互，必须绕开原生提交机制，用 JavaScript 控制流程。
为什么 action 和 method 不能用于异步提交
浏览器遇到 <form></form> 上的 action 和 method，只要触发 submit 行为（比如点 type="submit" 按钮），就会立刻发起 HTTP 请求并导航到响应页面。这是 HTML 规范定义的默认行为，不可禁用，只能阻止。
-
action是目标 URL，method是请求方法（"GET"或"POST"），它们只参与同步流程 - 即使你把
method写成"PUT"或"DELETE"，原生表单也只支持"GET"/"POST"；其他值会被降级为"GET" - 若保留
action+method又加 JS 监听，不调event.preventDefault()就会双提交：一次 JS fetch，一次浏览器跳转
真正可行的异步提交方式：用 FormData + fetch
这是当前最干净、兼容性足够（Chrome 42+/Firefox 39+/Safari 10.1+）、无需第三方库的方案。核心是手动收集数据、手动发请求、手动处理响应。
- 先移除
<form></form>的action和method属性，或至少不依赖它们触发提交 - 给表单加
id，例如<form id="userForm"></form> - 用
new FormData(document.getElementById("userForm"))自动提取所有带name的控件值（包括<input type="file">） - 调用
fetch(actionUrl, { method: "POST", body: formData })发送 —— 注意：body直接传FormData实例，不要 JSON.stringify - 服务端需能接收
multipart/form-data编码（文件上传）或application/x-www-form-urlencoded（纯文本）
const form = document.getElementById("userForm");
form.addEventListener("submit", async (e) => {
e.preventDefault();
const formData = new FormData(form);
const res = await fetch("/api/user", { method: "POST", body: formData });
const data = await res.json();
console.log(data);
});
容易被忽略的关键细节
异步提交不是“把 form 提交改成 fetch 就完事”，很多问题出在边界处理上：
立即学习“前端免费学习笔记（深入）”；
-
required、pattern等原生校验不会自动触发 —— 必须显式调用form.checkValidity()，否则用户可能点按钮却没反应 - 提交按钮要设
type="button"，而不是"submit"；否则即使加了preventDefault，某些旧版 Safari 仍可能闪一下 -
FormData不包含disabled的字段，但会包含display: none的字段 —— 若逻辑上需要排除某字段，得手动delete formData.delete("fieldName") - 服务端返回非 2xx 状态码时，
fetch不会抛错，需手动检查res.ok或res.status
最常漏掉的是表单校验联动和错误状态反馈：异步提交后，后端返回的字段级错误（比如“邮箱已被注册”）没法靠 HTML 原生机制展示，必须自己解析响应、定位 input[name="email"]、插入提示文案 —— 这部分没有银弹，得写。
