必须在表单submit事件中调用e.preventDefault()阻止默认跳转，否则fetch请求会被中断；按钮应设为type="button"或确保事件监听器绑定正确且DOM已就绪。
点击按钮后页面没反应，Fetch 请求根本没发出去？
最常见的原因是按钮默认行为没阻止，或者事件监听器没正确绑定。浏览器里点按钮会自动提交表单或跳转，导致页面刷新，Fetch 还没执行就被中断了。
- 确保按钮是
<button type="button">，不是type="submit"（除非你在表单里并手动event.preventDefault()） - 用
addEventListener绑定时，检查是否在 DOM 加载完成后执行，比如放在DOMContentLoaded里，或把 script 放在 body 底部 - 加一行
console.log("clicked")在事件回调开头，确认 JS 是否真的运行了
Fetch 返回 HTML 片段但插入后样式/脚本失效？
Fetch 拿到的纯 HTML 字符串直接写进 innerHTML，不会自动执行里面的 <script>，CSS 也不会重新解析——这是浏览器安全机制，不是 bug。
- 不要依赖插入的 HTML 中的内联
<script>，改用事件委托或提前注册好逻辑，例如用document.addEventListener("click", e => { if (e.target.matches("[data-action]")) {...} }) - 样式问题通常是因为新内容没命中现有 CSS 选择器（比如用了 class="card" 但全局 CSS 写的是
.container .card），建议用更宽松或独立的作用域类名 - 如果必须执行动态脚本，得手动提取
<script>标签、创建script元素并 append 到 document，但要注意执行顺序和重复加载风险
局部刷新时旧内容没清空，新旧内容堆叠在一起？
很多人只做 element.innerHTML += responseText，结果每次点击都追加，而不是替换——这在列表、表单反馈等场景特别容易出错。
- 明确你是要「替换」还是「追加」：替换用
element.innerHTML = responseText；追加才用+=或insertAdjacentHTML("beforeend", ...) - 如果目标容器有过渡动画或状态（比如 loading 类），记得在 Fetch 前清除旧状态：
container.classList.remove("loading"); container.innerHTML = ""; - 服务端返回的 HTML 最好是完整片段（如
<div class="item">...），避免只返回裸文本，否则插入后结构易断裂
Chrome 控制台报 Failed to fetch 或 CORS error？
Fetch 失败不一定是网络问题，90% 是路径错误或跨域策略卡住。本地开发时尤其容易踩坑。
立即学习“前端免费学习笔记（深入）”；
-
Failed to fetch常见于请求地址 404，检查fetch("/api/data")中的路径是否匹配后端实际路由，注意开头斜杠——"api/data"（相对路径）和"/api/data"（根路径）行为不同 - CORS 错误说明后端没配
Access-Control-Allow-Origin，开发阶段可用本地代理（如 vite 的server.proxy或 webpack devServer 的proxy）绕过，别用mode: "no-cors"，它会让响应变成 opaque，无法读取内容 - 后端返回非 2xx 状态码（如 500、401）时，
fetch不会自动 reject，必须手动检查：if (!response.ok) throw new Error(response.status)
