AJAX无刷新分页核心是拦截点击、异步获取JSON数据并动态更新DOM。需后端提供含列表与分页元信息的API，前端绑定事件、fetch请求、渲染列表及分页栏，并添加加载态、错误处理和history管理。
用 AJAX 实现无刷新分页，核心是拦截分页点击事件，用 JavaScript 发起异步请求获取新页数据，再动态更新页面内容，不重新加载整个页面。
1. 后端准备：提供分页数据接口
后端需提供一个返回结构化数据（如 JSON）的接口，例如：/api/articles?page=2&size=10。返回内容应包含：
- 当前页的数据列表（如
articles: [{id:1,title:"..."},...]） - 分页元信息（如
total、page、pages、has_next等） - 状态码 200，Content-Type 为
application/json
避免返回完整 HTML 片段（除非服务端渲染场景），优先由前端拼接或用模板引擎渲染。
2. 前端绑定分页点击与请求逻辑
给分页链接（如 <a href="#" data-page="2">2</a>）绑定点击事件，阻止默认跳转，用 fetch 或 XMLHttpRequest 请求数据：
document.addEventListener('click', function(e) {
if (e.target.matches('[data-page]')) {
e.preventDefault();
const page = e.target.dataset.page;
loadPage(page);
}
});
function loadPage(page) {
fetch(`/api/articles?page=${page}&size=10`)
.then(res => res.json())
.then(data => {
renderList(data.articles);
updatePagination(data);
updateURL(page); // 可选：同步浏览器地址栏
});
}
3. 动态渲染列表与分页控件
拿到数据后，用 JS 更新 DOM，推荐使用 innerHTML 或更安全的 textContent+createElement 方式：
- 清空旧列表容器（如
document.getElementById('list').innerHTML = ''） - 遍历
data.articles，逐条生成<li>并 append 到容器 - 重绘分页栏：根据
data.pages和data.page生成带data-page的链接，高亮当前页
注意避免直接拼接不可信内容，防止 XSS；如需富文本，先做 HTML 转义或使用 DOMPurify 过滤。
4. 增强体验：加载状态、错误处理与历史记录
提升可用性的小细节：
- 点击分页时显示 loading 提示（如禁用按钮、加旋转图标）
- 捕获网络错误或 4xx/5xx 响应，提示用户“加载失败，请重试”
- 调用
history.pushState()更新 URL（如/articles?page=3），支持前进/后退 - 监听
popstate事件，在用户点浏览器前后按钮时重新加载对应页
不复杂但容易忽略：首次进入页面时，也应从 URL 参数（如 new URLSearchParams(location.search).get('page')）读取当前页并加载，保证直链可访问。
