无刷新提交表单需禁用原生提交，用event.preventdefault()拦截，通过formdata收集数据并fetch发送；成功后手动更新ui，注意错误处理、按钮禁用、表单清空及兼容性问题。
点击按钮触发 fetch 提交表单数据
直接用 <button type="submit"></button> 配合 <form></form> 默认会整页刷新，要无刷新就得绕过表单原生提交行为。核心是监听按钮点击，手动收集表单字段，用 fetch 发送请求。
注意：别给按钮写 type="submit" 且放在 <form></form> 内却不阻止默认行为，否则会双提交（一次 fetch，一次页面跳转）。
- 用
event.preventDefault()拦住表单默认提交 - 用
new FormData(formElement)读取所有字段，自动处理文件、多选、空值 -
fetch的method设为"POST"，body直接传FormData实例（浏览器自动设Content-Type） - 后端需能接收
multipart/form-data或application/x-www-form-urlencoded（取决于FormData内容）
fetch 成功后如何更新页面而不刷新
提交成功只是网络请求完成，UI 还得手动同步。常见做法是清空表单、显示提示、或局部替换结果区域。
容易忽略的是错误状态处理——比如后端返回 400，fetch 不会抛错（只对网络失败 reject），必须手动检查 response.ok 或 response.status。
- 用
response.json()解析返回的 JSON，但需先确认response.headers.get("content-type")?.includes("json")，避免解析纯文本报错 - 提交中禁用按钮，防止重复点击：
button.disabled = true，完成后恢复 - 清空表单别用
form.reset()—— 它会重置所有字段（包括用户刚填但未提交的合法值），建议只清空特定<input>的value或files
兼容旧浏览器时 FormData 的坑
IE 10+ 支持 FormData，但 IE 10–11 不支持直接传 FormData 给 fetch（会报 TypeError: Type mismatch）。必须降级用 XMLHttpRequest，或用 polyfill。
另一个常见问题：如果表单含 <input type="file">，且你想预览图片，FormData 本身不包含文件内容，只是引用；但 fetch 发送时浏览器会自动读取并编码——这步在 Safari 旧版可能卡住，需确保文件 size 在合理范围（如
- IE 下改用
XMLHttpRequest+xhr.send(formData)，并监听load而非then - 不要在
FormData.append()时传undefined或null，某些浏览器会静默丢弃，应显式传空字符串 - 若后端要求 JSON 格式（非表单编码），得手动构造对象并
JSON.stringify()，此时Content-Type要设为"application/json"，且不能用FormData
按钮点击后 loading 状态没反馈？检查事件绑定时机
如果 JS 在 DOM 加载前执行，document.getElementById("myBtn") 可能返回 null，导致点击无响应。这不是逻辑错，是执行时机问题。
更隐蔽的是：按钮被动态插入（如通过模板渲染），但事件监听器只绑了一次，新按钮没监听器。这时候要用事件委托。
- 确保脚本放在
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
