要实现按上一页或下一页使用 Ajax 刷新内容，可以按照以下步骤进行操作：
-
在前端页面中添加两个按钮，分别为"上一页"和"下一页"。当用户点击按钮时，触发 Ajax 请求。
-
在后端控制器中接收 Ajax 请求，并根据传入的参数（例如当前页码）查询数据库，获取需要展示的内容。
-
将查询结果使用 JSON 格式返回给前端页面。
-
在前端页面的 Ajax 请求回调函数中，根据返回的 JSON 数据更新页面内容，例如更新列表数据、更新页码等。
-
最后，需要考虑分页部分的计算逻辑。例如，判断是否有上一页或下一页，并在前端部分显示或隐藏对应的按钮。
以下是一个简单的示例代码：
// 前端分页部分代码
var pageNum = 1; // 当前页码
// 上一页按钮事件
$('button#prevPage').click(function() {
if (pageNum > 1) {
pageNum--;
refreshContent();
}
});
// 下一页按钮事件
$('button#nextPage').click(function() {
pageNum++;
refreshContent();
});
// 刷新内容方法
function refreshContent() {
$.ajax({
url: '/getData',
type: 'GET',
data: {
pageNum: pageNum
},
success: function(data) {
// 更新列表数据等操作
}
});
}
// 后端控制器代码（使用 Spring MVC 框架）
@RequestMapping("/getData")
@ResponseBody
public Map<String, Object> getData(@RequestParam int pageNum) {
// 查询数据库，获取数据并计算分页部分的逻辑
// 将返回结果转换为 JSON 格式
Map<String, Object> resultMap = new HashMap<>();
resultMap.put("list", dataList);
resultMap.put("hasPrev", hasPrev);
resultMap.put("hasNext", hasNext);
return resultMap;
}