应使用 fetch() 局部刷新仪表盘区域，后端返回纯 HTML 片段并精准插入对应 ID 容器，同时手动重初始化图表和事件委托以确保交互与渲染正常。
用 fetch() 替换仪表盘区域最直接
现代仪表盘基本都用 fetch()，不依赖库、兼容性够用（Chrome 42+/Firefox 39+/Edge 14+），且能配合 async/await 写得干净。关键不是“发请求”，而是“只换数据区、不动导航和样式”。
常见错误是把整个页面 HTML 当作响应体，结果 innerHTML 插入后破坏了已绑定的事件或 CSS 样式。正确做法是后端只返回纯内容片段（比如一个 document.getElementById("chart-stats").innerHTML = data 精准覆盖。
- 确保仪表盘容器有稳定
id，例如id="dashboard-metrics"，不要用动态生成的 class 或临时 ID - 后端接口应返回 HTML 片段而非完整页面，避免
套壳 - 如果返回 JSON，需在前端手动拼 HTML 字符串，不如直接返回 HTML 片段省事且安全（无 XSS 风险前提下）
- 加个简单的 loading 状态：更新前设
element.innerHTML = "Loading..."，防止用户重复点击
XMLHttpRequest 在老旧系统里仍要小心状态判断
某些内网仪表盘还在用 IE11 或 Electron 旧版内核，XMLHttpRequest 不可避免。但很多人卡在 readyState === 4 和 status === 200 的组合判断上——漏掉 status 会导致 404 或 500 响应也被当成功处理，清空仪表盘还报错。
另外，responseText 是原始字符串，不能直接当 DOM 节点用；必须配合 innerHTML 或 insertAdjacentHTML() 才生效。用 innerText 会把标签当纯文本渲染，导致仪表盘变空白。
- 务必检查
xmlHttp.status，不只是readyState - 避免用
document.write()或直接赋值给outerHTML，会销毁原节点绑定的事件监听器 - 如果仪表盘里有图表（如 Chart.js），局部刷新后需手动调用
chart.update()，否则新数据不重绘
jQuery load() 看似简单，但 selector 提取容易出错
如果你项目已引入 jQuery，$("#metrics").load("/api/dashboard #metrics > *") 这种写法很常见，但它依赖服务端返回的 HTML 结构严格匹配。一旦后端模板改了嵌套层级，比如把 #metrics > * 就抓不到内容，结果仪表盘区域变成空。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
更隐蔽的问题是：如果服务端返回的 HTML 片段里含 script 标签，load() 默认不执行它们——你放了个 <script>initGauge(87)</script>，它就静静躺在 DOM 里，不会运行。
- 优先用
$("#metrics").load("/api/dashboard .metric-item")这类 class 选择器，比层级选择器鲁棒 - 需要执行脚本时，改用
$.get()+$.globalEval()，但注意 XSS 风险，仅限可信内部接口 - 调试时打开浏览器 Network 面板，看 Response 是否真包含预期 HTML，别只信控制台没报错
局部刷新后图表和交互失效，根本原因常被忽略
仪表盘不是静态 HTML，它通常含 ECharts、ApexCharts、自定义 gauge、时间选择器、导出按钮等。局部刷新只换了 DOM，但原来 JS 初始化逻辑不会自动重跑。比如你用 new ApexCharts(...).render() 初始化过一次，刷新后那个实例还在内存里，但 DOM 节点已被替换，再调 updateOptions() 就无效。
另一个坑是事件委托失效：如果按钮用 $("body").on("click", ".export-btn", ...) 绑定，那没问题；但若直接 $(".export-btn").click(...)，刷新后新插入的按钮就无法响应。
- 每次刷新后，显式重新初始化关键组件，例如
initCharts(); initDatePickers(); - 所有事件绑定必须用事件委托（
addEventListener的捕获/冒泡或 jQuery 的on()） - 避免在局部 HTML 片段里写内联
onclick，既难维护又绕过事件委托机制
局部刷新真正难的不是“怎么发请求”，而是“怎么让新内容和老逻辑无缝接上”。DOM 换了，JS 实例没换；结构变了，事件绑定断了；数据更新了，图表没重绘——这些才是仪表盘场景下最容易反复踩的坑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
