最轻量局部刷新方案是fetch+innerHTML，需设button type="button"、目标容器有id、后端返回纯HTML片段，并用AbortController控制超时、response.ok检查状态码；事件需委托绑定，script标签插入后不执行。
点击按钮只刷新页面某块区域，不用整个页面重载
直接用 fetch + innerHTML 最轻量、兼容性好，不需要引入 jQuery 或其他库。核心是：按钮不提交表单、不跳转，而是发起异步请求，拿到新 HTML 片段后只替换目标容器内容。
- 按钮必须加
type="button"，否则在<form>里会默认提交导致整页刷新 - 目标容器要有唯一
id，比如<div id="content-area"></div> - 后端接口应返回纯 HTML 片段（不是 JSON），且结构与原容器内一致，避免 DOM 错乱
- 记得在
fetch后检查response.ok，否则 404 或 500 时会静默失败
fetch 请求失败或超时怎么处理
网络不稳定或后端出错时，fetch 不会自动抛异常，仅当网络断开才 reject；HTTP 状态码如 404、500 仍算“成功”，但实际内容不可用。必须手动判断。
- 先检查
response.ok === false，再用response.status区分是 404 还是 500 - 超时需手动控制：用
AbortController，例如设置 8 秒超时，否则用户可能一直等白屏 - 错误提示建议写进目标容器，而不是弹
alert()，更符合局部刷新的体验逻辑
const controller = new AbortController();
setTimeout(() => controller.abort(), 8000);
fetch('/api/partial', { signal: controller.signal })
.then(r => {
if (!r.ok) throw new Error(`HTTP ${r.status}`);
return r.text();
})
.then(html => document.getElementById('content-area').innerHTML = html)
.catch(err => {
document.getElementById('content-area').innerHTML = '<p>加载失败，请重试</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill4293" title="Doc To HTML"><img
src="https://img.php.cn/upload/skill/000/000/081/178998486916110.jpg" alt="Doc To HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill4293" title="Doc To HTML">Doc To HTML</a>
<p>使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。</p>
</div>
<a href="/xiazai/skill4293" title="Doc To HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>';
});
刷新后绑定的新按钮没响应点击事件
因为用 innerHTML 替换内容后，原来绑定在旧 DOM 上的事件监听器全部丢失，新插入的按钮是“裸元素”，没绑定任何 handler。
立即学习“前端免费学习笔记（深入）”；
- 不要在每个按钮上单独写
onclick属性（维护困难、易 XSS） - 改用事件委托：给父容器（比如
id="content-area"）绑定一次click，用event.target.matches('.btn-submit')判断是否点中目标按钮 - 如果逻辑复杂，可在每次刷新后重新调用初始化函数，但要注意避免重复绑定——加个标记变量或先
removeEventListener
后端返回 HTML 里有 script 标签会执行吗
不会。通过 innerHTML = htmlString 插入的 <script> 标签**完全被忽略**，既不下载也不执行。这是浏览器安全机制，不是 bug。
- 想运行 JS，得手动提取并
eval()（不推荐，有安全风险）或创建<script>元素 append 到 head（仍受限于 CSP） - 更稳妥的做法是：后端只返回数据（JSON），前端用模板字符串或小函数渲染；或者把交互逻辑提前写好，靠事件委托触发
- 如果必须动态执行脚本，优先考虑把逻辑拆到独立 JS 文件，刷新后重新
import()模块
