页面刷新是因为未阻止表单默认行为，需在 form submit 事件中调用 event.preventdefault()；formdata 应直接传表单元素；后端需配置 multer 或 urlencoded 中间件解析 formdata。
用 fetch 提交表单时为什么页面还是刷新了
因为没阻止表单默认行为。浏览器看到 <form></form> 提交，会自动跳转或刷新，和你写不写 Ajax 无关。
关键操作是监听 submit 事件，然后调用 event.preventDefault()。
- 必须在
form.addEventListener('submit', ...)里调用，不能只在 fetch 后面加 - 如果用
onclick绑定按钮，容易漏掉回车提交场景，推荐绑定form元素本身 - 表单里有
type="submit"的按钮才触发submit事件，纯button不会
FormData 对象怎么正确收集表单字段
直接传 new FormData(formElement) 最稳，它自动读取所有成功控件（name 存在、未禁用、非 type="reset" 等）。
- 不用手动拼
URLSearchParams或遍历input.value，避免遗漏文件域或复选框数组 - 文件上传必须用
FormData，JSON.stringify会丢掉二进制内容 - 后端收到的是
multipart/form-data编码，不是 JSON，别在 Node.js 里只配body-parser.json()
提交后如何处理响应并更新页面
fetch 成功不代表业务成功——HTTP 200 只表示请求发出去且服务器返回了，得看响应体里的状态字段。
- 先检查
response.ok（对应 200–299），再用await response.json()解析 - 服务端最好统一返回类似
{ "success": true, "message": "...", "data": {...} }结构，前端按res.success分支处理 - 错误提示别只靠
alert()，把res.message插入到表单下方的<div class="error"></div>更友好 - 提交中给按钮加
disabled和 loading 文字，防止重复点击
为什么 fetch 提交后后端收不到数据
常见原因就两个：Content-Type 错了，或者后端没读对 body。
- 用
FormData时**不要**手动设Content-Type头，fetch 会自动生成带 boundary 的 multipart 头；设了反而导致后端解析失败 - Express 需要
multer（文件）或express.urlencoded({ extended: true })（普通字段）中间件，光靠body-parser.json()拿不到 FormData - 如果是纯 JSON 提交（非表单），才需要
headers: { 'Content-Type': 'application/json' }并用JSON.stringify()
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
