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>标签不会自动执行
后端返回 JSON 时，前端得自己拼 DOM
比直接返回 HTML 更可控、更安全，尤其当数据含用户输入内容时。容易踩的坑是字符串拼接 XSS 漏洞，或者对象字段名写错导致渲染空白。
- 后端接口返回结构类似：
{ "title": "订单已提交", "status": "success", "count": 5 } - 前端用模板字面量拼接，别用
+=拼字符串：el.innerHTML = `<p>${data.title}</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill8272" title="anything-to-html"><img src="https://img.php.cn/upload/skill/000/000/081/179195588450431.jpg" alt="anything-to-html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill8272" title="anything-to-html">anything-to-html</a> <p>将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。</p> </div> <a href="/xiazai/skill8272" title="anything-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 能解决的。 
