Java+Jquery+Ajax 实现无刷新分页功能效果

最新推荐文章于 2021-08-05 16:40:05 发布

dange_h

最新推荐文章于 2021-08-05 16:40:05 发布

阅读量1.4k

点赞数

分类专栏：技术文章标签： Ajax JSON 分页

本文链接：https://blog.csdn.net/dange_h/article/details/86657470

版权

本文介绍了如何使用Java、Jquery和Ajax技术实现无刷新分页功能。通过控制器将数据转化为JSON格式，点击分页按钮时，前端通过Ajax发送请求获取数据，并在回调中处理JSON数据，更新表格内容，从而达到页面无刷新的效果。

摘要由CSDN通过智能技术生成

这段时间在进行JSP教学，讲到了Ajax技术及JSON技术，就利用 JQuery的Ajax相关函数实现页面无刷新的效果，即：应用这个JQuery这个组件，可以实现在页面上加载数据库中的数据信息，但是并没有给用户页面刷新的感觉，这样既可以有效的进行数据交互，也可以不妨碍用户的其他操作。

实现思路及步骤：

1. 后台返回集合数据，在控制器中把数据转换成为JSON格式。

/*
* 调用业务层方法，把请求发给业务层方法,接收返回的数据 
* List<Student> list = service.getStudents(); //
* 把数据保存到相关作用域中，并进行页面转跳。 request.setAttribute("students", list);
*/
int pageIndex = 1; // 默认第一页
int pageSize = 5;   //每页大小是5条数据
if (request.getParameter("pageIndex") != null) { //如果有pageIndex参数则表示Ajax请求
			 
	pageIndex = Integer.parseInt(request.getParameter("pageIndex"));
	PageUtil<Student> pageUtil = service.getPageStudent(pageIndex, pageSize);
			
	//因为是ajax请求，需要所数据转换成JSON格式 
	JSONArray array = JSONArray.fromObject(pageUtil);
	JSONObject obj = new JSONObject();
	obj.put("pu", array);
	response.getWriter().write