直接用FormData配合submit事件可实现无刷新提交：先preventDefault阻止跳转，再new FormData(form)自动收集字段，最后fetch发送并处理响应，全程不依赖框架。
直接用 FormData 配合表单的 submit 事件，就能实现无刷新提交，关键在于阻止默认行为、构造数据、发请求、处理响应——整个过程不依赖任何框架。
监听 submit 事件并阻止页面跳转
表单原生的 submit 事件会触发页面刷新或跳转。必须在事件处理函数中调用 event.preventDefault() 来拦截它：
- 给
<form></form>元素绑定submit监听器（推荐用addEventListener） - 确保在回调第一行就执行
event.preventDefault()，否则可能来不及拦截 - 不要用
onsubmit="return false"这类内联写法，不利于逻辑解耦和错误处理
用 FormData 自动收集表单字段值
FormData 构造函数接收表单元素作为参数，能自动读取所有带 name 属性的控件（input、select、textarea、file 等），包括 checkbox 和 radio 的选中状态：
- 只需
new FormData(formElement)，无需手动遍历 DOM 取值 - 文件上传也天然支持，不需要额外 base64 编码或 Blob 处理
- 如果需要追加额外字段（如 token、时间戳），调用
formData.append('key', 'value')
用 fetch 发送异步请求并处理响应
把 FormData 传给 fetch 的 body 选项即可发送 POST 请求。注意：Content-Type 由浏览器自动设置为 multipart/form-data，且附带正确的 boundary，**不要手动设置该 header**：
- 使用
await fetch(url, { method: 'POST', body: formData }) - 检查
response.ok判断 HTTP 状态是否成功（200–299） - 用
await response.json()解析 JSON 响应；若后端返回纯文本或 HTML，可用text() - 提交后建议禁用提交按钮防止重复点击，响应完成后再恢复
更新 UI 而非刷新页面
根据后端返回的数据，动态更新页面局部内容，比如显示成功提示、清空表单、填充结果列表：
- 用
form.reset()快速清空所有字段（含 file 输入） - 将错误信息插入到对应字段旁的
<span class="error"></span>中 - 若提交的是评论或留言，可把新条目
prepend到列表顶部，模拟实时效果 - 避免整页
location.reload()或跳转，保持用户当前上下文
不复杂但容易忽略：确保表单有 method="POST"（虽非必需，但语义清晰），后端接口要能正确解析 multipart/form-data 格式，并对空字段、文件大小、CSRF 等做基本校验。
