表单数据没到后端主因是链路未对齐：浏览器未发、编码不匹配、后端解析中间件缺失或url未监听；页面跳转因submit默认行为未被event.preventdefault()及时拦截；fetch需显式设method、用formdata构造body、禁用手动content-type；后端req.body为空多因urlencoded/multer/json中间件配置错误。
表单数据没到后端，八成不是前端写错了，而是整个链路中某一层没对上：浏览器没发、发了但编码不对、后端没配解析、或者压根没监听那个 URL。
为什么点了提交按钮页面就跳转或变空白
这是浏览器在执行原生表单提交——它会自动构造一个完整 HTTP 请求并加载响应页面。你没看到数据发出去，是因为跳转太快，控制台日志被清空了。
-
event.preventDefault()必须写在submit事件处理函数的第一行，否则来不及拦截 - 别监听
click，要监听form元素上的submit事件，哪怕按钮是<button type="submit"></button> - 如果用了
fetch却还跳转，说明preventDefault()没生效，常见原因是事件监听绑定晚于 DOM 渲染（比如 Vue/React 动态挂载后没重绑） - 表单里嵌了另一个
<form></form>会导致事件冒泡中断，HTML 标准禁止嵌套表单
fetch 提交时 body 怎么构造才不报错
直接传 form 元素或 form.elements 给 fetch 的 body，一定会报 TypeError: Request with GET/HEAD method cannot have body——因为 fetch 不认识 HTML 表单对象。
- 必须用
new FormData(formElement)包一层，它能自动提取所有带name的字段，包括<input type="file"> -
method字段不能省：即使<form method="POST"></form>写了，fetch仍需显式写method: "POST" - 不要手动设
Content-Type头：FormData 会自动生成multipart/form-data; boundary=...；若想发 JSON，得先用Object.fromEntries(new FormData(form))转对象，再JSON.stringify() - 上传文件时，
enctype="multipart/form-data"是必须的，否则FormData无法读取input[type="file"]的二进制内容
后端收不到 req.body 怎么快速定位
Express/Koa 等框架里 req.body 是空对象，几乎全是中间件没配对。不是前端没发，是后端“听不懂”请求体。
- 普通文本字段（无文件）：必须加
express.urlencoded({ extended: true })，只靠bodyParser.json()完全无效 - 含文件上传：
urlencoded中间件对multipart/form-data完全无用，必须换multer或类似中间件 - 前端发的是 JSON：
bodyParser.json()要启用，且前端必须设headers: {"Content-Type": "application/json"} - 检查
req.headers["content-type"]值是否和中间件匹配，比如前端发multipart却只配了urlencoded，就会静默丢弃整个 body
action 和 method 写错会导致什么
这两个属性看着简单，但错一个字符就 404 或 405，而且错误非常隐蔽。
-
method不写，默认是GET，但多数后端接口只接受POST，结果返回 405 Method Not Allowed -
action写相对路径如api/submit，当前 URL 是/user/profile，最终请求变成/user/api/submit，404 - 推荐一律用绝对路径：
action="/api/submit"，开头带/才从根目录算起 - RESTful 接口建议不用原生
form提交，改用 JS 控制，因为原生不支持PATCH/DELETE，也难加 token 或自定义 header
最常被忽略的点是：前后端对 Content-Type 的约定必须严格一致，差一个分号、少一个 boundary 参数，后端就收不到字段。调试时优先抓包看真实请求头和 body，别只信前端 console.log。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
