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

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

实现思路及步骤：

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

/*
* 调用业务层方法，把请求发给业务层方法,接收返回的数据 
* List 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 pageUtil = service.getPageStudent(pageIndex, pageSize);
			
	//因为是ajax请求，需要所数据转换成JSON格式 
	JSONArray array = JSONArray.fromObject(pageUtil);
	JSONObject obj = new JSONObject();
	obj.put("pu", array);
	response.getWriter().write(obj.toString()); //把JSON数据写出到页面
			
}else { 			 
	PageUtil pageUtil = service.getPageStudent(pageIndex, pageSize);
	request.setAttribute("pu", pageUtil);
	request.getRequestDispatcher("admin/studentList.jsp").forward(request, response);
}

2. 页面点击上下页时向后台发送Ajax请求。

3. 在回调函数中处理返回的JSON数据。

4. 对JSON数据进行封装，替换掉表格中原来的数据。

页面原来效果：

			

		

			
学号
			
姓名
			
性别
			
年龄
			
电话
			
地址
			
邮箱
			
出生日期
			
年级
			
操作
		
		

				
${stu.studentNo }
				
${stu.name }
				
${stu.sex }
				
${stu.age }
				
${stu.phone }
				
${stu.address }
				
${stu.email }
				
${stu.birthday }
				
${stu.grade.gradeName }
				
编 辑 | 删 除
			
		
	

	

		共 ${pu.pageCount} 条，共 ${pu.pageNumber} 页，当前第 ${pu.pageIndex } 页  
		
			
		

		 
	

点击下下页分页时，无刷新效果就出来了。