必须调用event.preventdefault()阻止表单默认提交行为，否则js逻辑不执行；应放在事件处理函数首行，配合formdata读取数据、disabled控制按钮状态、检查响应头content-type确保json解析成功。
表单提交后页面不跳转，但数据没反应？检查 event.preventDefault()
默认情况下，<form></form> 提交会触发页面刷新或跳转，掩盖了你写的 JS 处理逻辑。必须在事件监听里显式阻止它，否则后续的数据显示、校验、模拟请求全都不会执行。
常见错误是忘了加这句，或者加在了异步操作之后（比如放在 fetch() 里），导致阻止失效。
- 监听
submit事件，不是click -
event.preventDefault()必须放在函数最开始（或至少在任何可能抛错的代码前） - 如果用了
async函数，仍需同步调用preventDefault()，不能等await后再调
form.addEventListener('submit', (e) => {
e.preventDefault(); // ✅ 必须第一行
const data = new FormData(form);
console.log(Object.fromEntries(data)); // 可看到原始键值
});
想实时展示“正在处理…”和结果，用 disabled + textContent 控制按钮状态
用户点击后若无视觉反馈，容易重复提交；而直接修改 innerHTML 可能破坏事件绑定或引入 XSS 风险。稳妥做法是用原生属性和纯文本控制。
- 提交瞬间设
button.disabled = true，并改textContent为“提交中…” - 处理完成（无论成功失败）再恢复
disabled = false和原始文字 - 别用
innerHTML插入用户输入的内容，避免执行脚本；如需渲染，先textContent再做白名单过滤
const btn = form.querySelector('button');
btn.textContent = '提交中…';
btn.disabled = true;
// …处理完后
btn.textContent = '提交';
btn.disabled = false;
用 FormData 读取表单比 querySelector 更可靠
手动遍历每个 input 容易漏掉 select、textarea、复选框（checkbox）、单选组（radio），还得分情况处理 checked、selectedOptions 等。
FormData 自动聚合所有带 name 的控件，对多选、文件、空值都有标准行为，且兼容 GET/POST 编码逻辑。
- 复选框未勾选时不会出现在
FormData中（符合语义，不用额外过滤） - 同名多值（如多个
name="tag"）会被全部收录，可用getAll('tag') - 文件字段也能被正确捕获，后续可直接传给
fetch()
服务端返回 JSON 但前端报 Unexpected end of JSON input？确认响应头是 Content-Type: application/json
浏览器解析 response.json() 时，会检查响应体是否为空或格式非法。但更隐蔽的问题是：即使返回了 {"ok":true}，如果后端没设 Content-Type，某些环境（尤其是本地开发服务器）可能默认返回 text/plain，导致解析失败。
- 用浏览器 DevTools 的 Network 标签页查看响应头，确认
Content-Type值 - Node.js/Express 中要写
res.json({})或手动设头：res.set('Content-Type', 'application/json') - 调试时可先用
response.text()打印原始响应，排除空格、BOM、HTML 错误页等干扰
实际交互中，表单验证、防重提交、错误提示文案、加载状态粒度（整个表单 vs 单个字段）这些细节，往往比“怎么提交”更消耗调试时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
