Network面板无请求说明表单未触发提交，常见原因是button缺少type="submit"、控件不在form内或存在嵌套form；仅有Doc请求表明为原生同步提交；XHR/Fetch失败则JS拦截后fetch出错。
看 Network 面板有没有发出请求
表单点了没反应，第一件事不是查 JS，而是打开浏览器开发者工具的 Network 面板，点一下提交按钮，观察是否有新请求出现。
常见现象和对应判断：
- 完全没请求：说明表单根本没触发提交，大概率是
button没写type="submit"，或按钮不在form标签内，或存在嵌套form导致外层被截断 - 只有
Doc类型请求（状态码 200）：说明走的是原生同步提交，页面跳转了——后端返回的可能是 HTML 或裸 JSON，而不是你期望的 API 响应 - 有
XHR或Fetch请求但失败：说明 JS 拦截了submit事件，但fetch()调用出错，比如Content-Type不匹配、没加event.preventDefault()导致页面先跳走
检查 FormData 是否真的采集到字段
哪怕表单结构看着没问题，name 写错大小写、漏写、或者控件在 form 外部，都会让 FormData 为空。
在控制台执行这行代码快速验证：
立即学习“前端免费学习笔记（深入）”；
console.log([...new FormData(document.querySelector('form'))]);
如果输出空数组 []，说明没有可提交的带 name 的控件。这时要逐个确认：
-
<input>、<textarea></textarea>、<select></select>是否都写了name属性（id不管用） - 这些标签是否真在
<form></form>开始与结束标签之间（用 Elements 面板右键检查 DOM 层级） - 是否存在
<form></form>自闭合写法，导致后续所有控件“失联”
对比 Request Payload 和后端接收逻辑
在 Network 面板点开那个请求，切到 Headers 标签页，重点看 Content-Type；再切到 Payload 标签页，看实际发了什么数据。
常见错配场景：
-
Content-Type: application/x-www-form-urlencoded→ 后端要用req.body（Express）或$_POST（PHP），不能去读原始流 -
Content-Type: multipart/form-data; boundary=...→ 必须配置文件中间件（如 Express 的multer），否则req.body为空，文件字段直接丢失 -
Content-Type: application/json→ 这是 fetch 手动发的，原生<form></form>永远不会发这个类型；如果后端只接受 JSON，就必须改用 JS 提交
注意：中文字段乱码通常是因为后端没设字符集（如 PHP 缺 header('Content-Type: text/html; charset=utf-8');），或表单没声明 accept-charset="UTF-8"。
别忽略 submit 事件是否真的被监听到
很多“点了没反应”其实是 JS 监听了 submit，但没生效——尤其是动态渲染的表单（React/Vue/HTMX 插入）。
验证方式很简单：
- 在绑定事件的代码前加
console.log('submit listener attached')，确认执行时机 - 手动触发一次：
document.querySelector('form').dispatchEvent(new Event('submit', { cancelable: true }))，看控制台是否打印日志 - 如果没反应，说明监听器压根没挂上，常见原因是 DOM 节点还没插入文档就绑了事件
动态插入的表单，监听必须在节点真实挂载后执行，不能只靠页面加载时的一次 DOMContentLoaded。
