表格数据不更新需检查XMLHttpRequest响应是否精准插入<tbody>，确保后端返回纯<tr><td>片段或JSON数组，前端用innerHTML或replaceChildren()替换；推荐fetch()+response.json()防XSS；绑定事件用委托；加状态锁、AbortController和重试逻辑；渲染用documentFragment提升性能。
表格数据不更新？检查 XMLHttpRequest 响应是否真被插入到 <tbody>
很多情况下表格“看起来没刷新”，其实是新数据没进对位置——比如把整个 <table> 替换掉了，导致事件监听丢失；或者只更新了 <thead>，<tbody> 还是旧的。务必确认后端返回的是纯 <tr><td>... 片段（或 JSON 数组），前端用 innerHTML 或 replaceChildren() 精准替换 <tbody> 内容。
- 推荐用
fetch()+response.json()，避免手动解析 HTML 字符串带来的 XSS 风险 - 若后端返回 HTML 片段，用
DOMParser解析再取body.children，别直接insertAdjacentHTML('beforeend', html)往里追加 - 表格行有绑定点击事件？用事件委托监听
<tbody>，别给每行单独addEventListener
fetch() 刷新表格时重复请求或卡住？加状态锁和错误重试逻辑
用户手抖连点“刷新”、网络波动导致请求挂起，都会让表格状态混乱。必须在发起请求前设 isRefreshing = true，成功/失败后才置为 false，并禁用按钮或显示 loading。
- 用
AbortController控制请求生命周期，避免上一个请求还没结束，下一个又发出去 - 简单重试：捕获
fetch的TypeError（如网络断开），延迟 1s 后重试，最多 2 次 - 后端返回非
2xx状态码？检查响应体里的message字段，别只看ok属性
JSON 数据渲染到表格慢？避免拼接大字符串，改用 documentFragment
100 行数据用 += '<tr>...</tr>' 拼接再赋值给 innerHTML，会触发多次 DOM 重排。尤其在低端设备上明显卡顿。
- 创建
documentFragment，循环中用document.createElement('tr')构建节点，再append()进 fragment - 最后一次性
tbody.replaceChildren(fragment)，比反复操作 DOM 快 3–5 倍 - 字段含特殊字符（如
&、）？用 <code>textContent赋值单元格内容，别用innerHTML
表格排序/分页后刷新失效？确保请求参数同步当前 UI 状态
用户点了“按姓名升序”，但刷新按钮仍发默认参数（如 ?page=1&sort=），结果表格又回到初始态。参数不能硬编码，得从当前表格控件实时读取。
立即学习“前端免费学习笔记（深入）”；
- 排序字段存在
data-sort-field和data-sort-order属性里？读它们拼 query string - 分页用的是自定义组件？取
currentPage.value或input.valueAsNumber，别写死1 - 搜索框有输入？把
searchInput.value.trim()加进 fetch 的URLSearchParams
