在前端jsp页面点击页码时不再重新向controller发送请求,而是展示第一次请求的对应页码的数据,能帮我写具体的jsp代码吗
时间: 2024-05-15 13:19:08 浏览: 78
jsp页面代码,可以用来参考
当用户点击页码时,可以通过ajax请求获取对应页面的数据,并通过DOM操作将数据展示在页面上,具体代码如下:
HTML代码:
```
<div id="page-content"></div>
<div id="page-numbers">
<ul>
<li><a href="#" class="page-link">1</a></li>
<li><a href="#" class="page-link">2</a></li>
<li><a href="#" class="page-link">3</a></li>
<li><a href="#" class="page-link">4</a></li>
</ul>
</div>
```
jQuery代码:
```
<script>
$(function() {
// 点击页码时触发事件
$(".page-link").click(function(event) {
event.preventDefault(); // 阻止默认的链接跳转行为
// 获取当前页码
var pageNumber = $(this).text();
// 发送ajax请求获取对应页码的数据
$.ajax({
url: "/data/getData?pageNumber=" + pageNumber,
type: "GET",
dataType: "html",
success: function(data) {
// 将数据展示在页面上
$("#page-content").html(data);
}
});
});
});
</script>
```
在后台Controller中,对应的请求路径为/data/getData,通过获取pageNumber参数来获取对应页码的数据,并返回一个html片段。具体可以参考如下代码:
```
@RequestMapping(value = "/data/getData", method = RequestMethod.GET)
public String getData(@RequestParam("pageNumber") int pageNumber) {
// 获取对应页码的数据
List<Data> dataList = getDataList(pageNumber);
// 将数据渲染成一个html片段,并返回
String html = renderDataList(dataList);
return html;
}
```
阅读全文