fetch() + innerhtml是最直接的局部刷新方案，需确保容器已加载、检查response.ok、返回纯html片段；replacechildren()更安全，可防xss并保留事件监听器。

点击按钮只刷新页面某块区域，用 fetch 最直接

不用引入 jQuery 或其他库，现代浏览器原生 fetch 就够用。关键不是“怎么发请求”，而是“发完怎么把结果塞进指定 DOM 元素里”。常见错误是没等响应回来就操作 DOM，或者把 HTML 片段直接 innerHTML 进去却忽略脚本执行（比如新插入的按钮绑定不了事件）。

• 目标容器必须有唯一 id，比如 <div id="result-box"></div>
• 按钮加 type="button"，避免表单默认提交刷新整页
• fetch 后要用 response.text() 或 response.json() 显式读取，不能直接赋值给 innerHTML
• 如果后端返回的是纯 HTML 片段，innerHTML 可用；但其中的 <script></script> 标签不会自动执行

后端返回 JSON 时，前端得自己拼 DOM

比直接返回 HTML 更可控、更安全，尤其当数据含用户输入内容时。容易踩的坑是字符串拼接 XSS 漏洞，或者对象字段名写错导致渲染空白。

• 后端接口返回结构类似：{ "title": "订单已提交", "status": "success", "count": 5 }
• 前端用模板字面量拼接，别用 += 拼字符串：el.innerHTML = `<p>${data.title}</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill7761" title="Article To Html"><img src="https://img.php.cn/upload/skill/000/000/081/179168408018805.jpg" alt="Article To Html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill7761" title="Article To Html" class="overflowclass">Article To Html</a> <p class="overflowclass">文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。</p> </div> <a rel="nofollow" href="/xiazai/skill7761" title="Article To Html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <span>共 ${data.count} 条</span>`
• 字段必须校验存在，比如 data?.title || '加载中...'，否则 undefined 会显示成文字
• 如果要绑定新按钮事件，得在插入后单独调用函数，例如 initNewButtons()

按钮点击后禁用 + 加载态，防止重复提交

用户手快连点两次，后端可能收到两个相同请求，造成数据重复或状态错乱。这不是 UI 花样问题，是实际业务必须处理的边界。

• 点击瞬间设 button.disabled = true，同时改文案为 button.textContent = '提交中...'
• 无论成功失败，都要恢复按钮状态 —— 必须放在 finally 块里，不能只写在 then 或 catch
• 别只靠 CSS 隐藏按钮，禁用状态能真正阻止点击事件触发
• 如果请求超时，fetch 默认不超时，需手动加 AbortController 控制

跨域、401、网络中断这些情况必须显式处理

开发时本地跑通不代表线上没问题。真实环境里，后端域名不同、登录过期、WiFi 切换瞬间断连，都会让 fetch 进 catch 或返回非 2xx 状态码，但很多人只写了 then 分支。

• fetch 只在网络错误时 reject，HTTP 状态码 401/500 仍走 then，得手动判断 !response.ok
• 常见错误信息如 TypeError: Failed to fetch 表示网络层失败，可能是跨域没配好或服务挂了
• 401 响应建议跳转登录页，而不是弹个“请求失败”——用户其实知道他没登录
• 本地测试跨域，可用 localhost:3000 访问 localhost:8000 接口，但必须后端配 Access-Control-Allow-Origin

实际最麻烦的从来不是发请求，是状态同步：按钮禁用后用户刷新页面，按钮还是灰的；局部刷新后滚动位置偏移；历史记录没更新导致前进/后退异常。这些得结合 history.pushState 和组件生命周期一起看，不是单靠 Ajax 能解决的。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！