必须用 event.preventDefault() 阻止表单默认跳转，且需在 submit 事件处理函数首行调用；随后用 FormData 配合 fetch() 手动提交，移除 formaction 等干扰属性，并主动处理校验、loading 与错误提示。
用 event.preventDefault() 阻止表单默认提交行为
表单跳转本质是浏览器对 <form> 提交的默认响应：发送请求、刷新/跳转页面。不阻止它，任何后续 JS 逻辑都来不及执行。
关键点在于监听 submit 事件，并在回调中调用 event.preventDefault()：
<form id="myForm">
<input name="email" required>
<button type="submit">提交</button>
</form>
<script>
document.getElementById('myForm').addEventListener('submit', function(e) {
e.preventDefault(); // 必须放在最前面
console.log('表单未跳转，可执行校验或 AJAX');
});
</script>
- 必须在事件处理函数第一行调用，否则可能被忽略
- 不要用
return false替代——它还会阻止事件冒泡，易引发意外副作用 - 仅阻止跳转，不影响字段验证（
required等原生校验仍生效）
用 fetch() 或 XMLHttpRequest 替代表单自动提交
阻止默认行为后，需手动发请求。现代项目优先选 fetch()，兼容性足够（IE 不支持，需 polyfill 或降级）。
注意表单数据格式：直接用 FormData 最稳妥，它自动匹配 enctype="multipart/form-data" 和普通键值对：
word报告自动生成神器
下载
Word报告自动生成神器。自动生成专业Word文档报告，支持模板填充、目录生成、表格/图表插入、页眉页脚、多级标题、样式主题、批量邮件合并。当用户需要生成Word报告、创建合同文档、批量生成通知/证书、填充Word模板、制作商业计划书时触发。
立即学习“前端免费学习笔记（深入）”；
<form id="loginForm">
<input name="username">
<input name="password" type="password">
</form>
<script>
document.getElementById('loginForm').addEventListener('submit', async function(e) {
e.preventDefault();
const formData = new FormData(this);
try {
const res = await fetch('/api/login', {
method: 'POST',
body: formData // 自动设置 Content-Type
});
const data = await res.json();
if (res.ok) {
alert('登录成功');
}
} catch (err) {
alert('请求失败');
}
});
</script>
- 不用手动拼接 URL 查询字符串或 JSON 字符串——
FormData处理二进制文件和普通字段都安全 - 若后端要求
Content-Type: application/json，需先转对象：JSON.stringify(Object.fromEntries(formData)) -
fetch()不带 cookie，如需鉴权，加credentials: 'include'
避免隐式跳转：禁用 formaction、formmethod 和 target
这些属性会让按钮绕过父 <form> 的事件监听，直接触发跳转，是容易被忽略的“漏网之鱼”。
- 检查所有
<button>和<input type="submit">是否含formaction属性——有则删掉，统一由 JS 控制 - 避免使用
target="_blank"或target="_self"，它们会强制导航，且无法被preventDefault()拦截 - 如果必须多端点提交，改用 JS 中根据条件切换
fetch()的 URL，而非依赖 HTML 属性
错误提示与状态反馈不能只靠跳转后页面
无跳转意味着用户始终停留在同一页面，所有反馈（成功、失败、校验错误）必须由 JS 主动渲染，否则用户会以为“没反应”。
- 提交前清空旧提示，防止残留；提交后根据响应更新 DOM，例如：
document.querySelector('.error').textContent = '邮箱格式错误' - 禁用提交按钮并加 loading 状态，避免重复点击：
button.disabled = true - 服务端返回 4xx 错误时，解析
res.json()中的errors字段，映射到对应输入框下方显示 - 不要依赖 HTTP 状态码做全部判断——200 响应体里也可能含业务错误（如 { "code": 4001, "msg": "验证码过期" }）
formaction）和 JS 提交逻辑，导致部分按钮跳转、部分不跳，行为不一致。只要确保所有提交入口都走同一个 submit 监听器，再彻底移除那些“快捷属性”，就能稳住页面不跳。 
