表单提交失败主因是未对齐浏览器打包、http传输、后端解析三层约定：method未声明致默认get而接口只收post；action相对路径拼接错误；含文件未设enctype；submit按钮type缺失或表单嵌套；动态渲染表单监听器绑定过早；需不跳转、读json、加loading等时须改用fetch+formdata。
表单提交不是只有 <form method="post"></form> 这一种写法，选错方式会导致数据发不出、页面跳转失控、中文变乱码、甚至后端收不到 req.body —— 根本原因往往不是代码写错了，而是没对齐「浏览器怎么打包」「HTTP 怎么传」「后端怎么拆包」这三层约定。
为什么 form 提交后页面跳转了但后端收不到数据
最常见原因是 method 和 action 配置失配：
-
method没显式声明：浏览器默认用GET，但后端接口（比如/api/login）通常只接受POST，结果请求直接 405 或 404 -
action写成相对路径且缺开头斜杠：比如写成api/user，浏览器会拼成当前页 URL 下的子路径（如https://example.com/dashboard/api/user），而非预期的https://example.com/api/user - 含
<input type="file">却没设enctype="multipart/form-data"：此时浏览器仍发请求，但后端（如 Express）若只挂了body-parser，req.body就是空对象，文件字段也消失
submit 按钮点了却没触发 onsubmit 监听
事件监听失效，90% 是 DOM 绑定或按钮语义问题：
- 按钮没写
type属性：部分浏览器当type="submit"处理，但不可靠；务必显式写<button type="submit"></button> - 表单里嵌了另一个
<form></form>：HTML 标准禁止嵌套表单，内层<form></form>会被浏览器静默截断，导致 submit 事件冒泡中断 - 表单是 JS 动态插入的（如 React useEffect 渲染）：监听器在初始脚本执行时绑定，但那时 DOM 还没挂载，得等节点真实存在后再调用
form.addEventListener('submit', ...)
用 fetch 或 axios 替代原生 form 提交的硬性条件
只要需要以下任意一项，就必须放弃原生 <form></form> 提交：
- 提交后不跳转，要留在当前页处理响应（比如显示 success toast 或更新局部 UI）
- 要读取后端返回的 JSON 数据（原生提交只能跳转到响应 HTML 页面）
- 要加 loading 状态、拦截网络错误、重试逻辑或上传进度条
- 要手动控制请求头（如带
Authorization、X-Request-ID）
这时得用 JS 序列化字段，例如：new FormData(formElement)（兼容文件）、Object.fromEntries(new FormData(formElement))（纯文本），再传给 fetch()。注意：FormData 对空值、布尔值、数组的处理和后端解析习惯必须对齐。
GET 和 POST 提交的本质区别不只是“地址栏显不显示”
它们在协议层就是两种不同行为：
-
GET把所有字段拼进 URL 查询字符串（?a=1&b=2），受浏览器 URL 长度限制（通常 ≤ 2048 字符），且会被缓存、记录在服务器日志和代理中——不适合密码、token、长文本 -
POST把数据放请求体（body），长度几乎无限制，但需匹配enctype：默认application/x-www-form-urlencoded（键值对编码）；传文件必须multipart/form-data（分段编码）；想发 JSON 则得手动设Content-Type: application/json并用JSON.stringify() - 别指望
GET提交中文不出问题：URL 编码后是%E4%BD%A0这类，后端若没调decodeURIComponent或对应框架解码配置，就显示乱码
真正容易被忽略的是：同一个后端接口，可能同时支持 GET 查询和 POST 创建，但两者的参数位置（query vs body）、编码方式、校验逻辑、幂等性都不同——前端不能只看 URL 一样就混用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
