用 fetch() 替代表单默认提交需监听 submit 事件并调用 prEventDefault()，用 FormData 收集数据，根据后端要求选择 application/x-www-form-urlencoded 或 application/json 格式发送，处理响应、错误及用户反馈，并注意兼容性。
用 fetch() 替代表单默认提交
html 表单默认提交会触发页面跳转或刷新，要“无刷新”，核心是阻止这个默认行为，并用 javaScript 主动发送数据。最直接的方式是监听 submit 事件，调用 event.preventDefault()，再用 fetch() 发送请求。
注意：不要在
上写 action 或 method 后就不管了——即使没跳转，浏览器仍可能按传统方式提交；必须显式拦截。
- 获取表单元素：
const form = document.querySelector('form'); - 绑定提交事件：
form.addEventListener('submit', handleSubmit); - 在
handleSubmit中调用event.preventDefault() - 用
new FormData(form)快速收集所有字段值（支持file、checkbox等）
fetch() 提交时 content-type 的选择
后端接收方式决定前端该发什么格式。常见两种：
- 发
application/x-www-form-urlencoded（类似传统表单）：用FormData即可，fetch会自动设对Content-Type，且兼容文件上传 - 发
application/json：需手动JSON.stringify()，并显式设置headers: { 'Content-Type': 'application/json' }；但此时FormData不能直接用，得先转成普通对象
错误示例：fetch(url, { method: 'POST', body: JSON.stringify(data) }) 却没设 Content-Type，后端（如 express）可能收不到 req.body。
立即学习“前端免费学习笔记（深入）”；
处理响应和用户反馈
无刷新不是“没反应”，而是把原来页面跳转后的提示，换成当前页内的状态更新。容易忽略的是错误边界：
-
fetch()成功发出请求 ≠ 后端业务成功；需检查response.ok和自定义返回字段（如data.code === 200） - 网络失败、超时、CORS 报错不会进
.catch()，除非请求根本没发出去；response.status为 4xx/5xx 仍会走.then() - 提交中应禁用按钮（
button.disabled = true），避免重复点击；成功/失败后恢复，并清空或重置表单（form.reset()）
form.addEventListener('submit', async (e) => { e.preventDefault(); const btn = e.target.querySelector('button'); btn.disabled = true; try { const res = await fetch('/api/login', { method: 'POST', body: new FormData(form) }); const data = await res.json(); if (res.ok && data.success) { alert('登录成功'); form.reset(); } else { alert(data.message || '提交失败'); } } catch (err) { alert('网络异常，请重试'); } finally { btn.disabled = false; } });兼容性与降级提醒
fetch() 在 IE 完全不支持，ios safari 10.1+ 才支持 FormData 上传文件。如果项目需兼容老环境：
- 用
XMLHttpRequest手动封装（麻烦但可控） - 引入
whatwg-fetchpolyfill（仅解决fetch语法，不解决FormData文件上传的兼容问题） - 服务端接口最好同时支持
GET查询参数和POST表单数据，便于极端情况 fallback
真正上线前，务必在目标设备上测试“带文件的表单提交”是否真能无刷新完成——这是最容易翻车的环节。