主页面代码，转向需要显示数据的页面
<a href="user/index">用户维护</a>
基于ssm框架的后端控制器代码，接收前端请求，转向预定的页面
@RequestMapping("/index") ???public String index() { ???????return "user/index"; ???}这个时候就要在index.jsp中使用Ajax加载数据，使用Ajax向后端控制器发出要求，需要在index中定义一个方法，并在页面加载的时候加载方法
function pageQuery(pageno){ ???????????????????????????????var loadingIndex = null; ???????????????????????????????$.ajax({ ???????????????????type : "POST", ???????????????????url ?: "${APP_PATH}/user/pageQuery", ???????????????????data : { ???????????????????????????"pageno" : pageno, ???//页数 ????????????????????????????"pagesize" : 2 ??????//一页数据量 ???????????????????}, ???????????????????beforeSend : function(){ ???????????????????????loadingIndex = layer.msg(‘数据处理中‘, {icon: 16}); //一种插件，等待时显示，提示用户等待 ???????????????????}, ???????????????????success : function(result){ ???????????????????????layer.close(loadingIndex); ???????????????????????if(result.success){ //如果成功返回数据，将数据渲染到页面的过程
.....
???????????????????} ???????????}); ???????????????????????????????????????????????????????????后端控制器接收到请求后根据对应的url找到对应的控制器，实现控制器内的内容并将数据传回给前端渲染加载给用户
???????@ResponseBody ???@RequestMapping("/pageQuery") ???public Object pageQuery(Integer pageno,Integer pagesize) { ???????????????????????//自定义的ajax结果Bean，便于使用 ???????AJAXResult result = new AJAXResult(); ???????????????try{ ???????????//分页查询 ???????????Map<String,Object> map = new HashMap<String,Object>(); ???????????map.put("start", (pageno-1)*pagesize); ???????????map.put("size", pagesize); ???????????map.put("queryText",queryText); ???????????????????????List<User> users = userService.pageQueryDate(map); ???????????????????????//总数据条数 ???????????int totalsize =userService.pageQueryCount(map); ???????????//总页码 ???????????int totalno = 0; ???????????if(totalsize % pagesize == 0) { ???????????????totalno = totalsize / pagesize; ???????????}else { ???????????????totalno = totalsize / pagesize + 1; ???????????} ???????????//分页对象 ???????????//Page<User> userPage = new Page<User>(); ???????????//userPage.setDatas(users); ???????????//userPage.setPageno(pageno); ???????????//userPage.setTotalno(totalno); ???????????//userPage.setTotalsize(totalsize); ???????????????????????//result.setData(userPage); ???????????result.setSuccess(true); ???????}catch(Exception e) { ???????????e.printStackTrace(); ???????????result.setSuccess(false); ???????} ???????????????return result; ???} ???前端对数据的渲染过程，代码为前面省略的内容
var tableContent = ""; ???????????????????????????var pageContent = ""; ???????????????????????????????????????????????????????var userPage = result.data; ???????????????????????????var users = userPage.datas; ???????????????????????????????????????????????????????$.each(users,function(i,user){ ???????????????????????????????tableContent += ‘<tr>‘; ???????????????????????????????tableContent += ‘ ?<td>‘+(i+1)+‘</td>‘; ???????????????????????????????tableContent += ‘ ?<td><input type="checkbox"></td>‘; ???????????????????????????????tableContent += ‘ ?<td>‘+user.loginacct+‘</td>‘; ???????????????????????????????tableContent += ‘ ?<td>‘+user.username+‘</td>‘; ???????????????????????????????tableContent += ‘ ?<td>‘+user.email+‘</td>‘; ???????????????????????????????tableContent += ‘ ?<td>‘; ???????????????????????????????tableContent += ‘ ?????<button type="button" class="btn btn-success btn-xs"><i class=" glyphicon glyphicon-check"></i></button>‘; ???????????????????????????????tableContent += ‘ ?????<button type="button" class="btn btn-primary btn-xs"><i class=" glyphicon glyphicon-pencil"></i></button>‘; ???????????????????????????????tableContent += ‘ ?????<button type="button" class="btn btn-danger btn-xs"><i class=" glyphicon glyphicon-remove"></i></button>‘; ???????????????????????????????tableContent += ‘ ?</td>‘; ???????????????????????????????tableContent += ‘</tr>‘; ???????????????????????????}); ???????????????????????????????????????????????????????if(pageno > 1){ ???????????????????????????????pageContent += ‘<li><a href="#" onclick="pageQuery(‘+(pageno-1)+‘)">上一页</a></li>‘; ???????????????????????????} ???????????????????????????for (var i=1;i <= userPage.totalno;i++){ ???????????????????????????????if(i == pageno){ ???????????????????????????????????pageContent += ‘<li class="active"><a href="#" onclick="pageQuery(‘+i+‘)">‘+i+‘</a></li>‘; ???????????????????????????????}else{ ???????????????????????????????????pageContent += ‘<li><a href="#" onclick="pageQuery(‘+i+‘)">‘+i+‘</a></li>‘; ???????????????????????????????} ???????????????????????????} ???????????????????????????????????????????????????????if(pageno < userPage.totalno){ ???????????????????????????????pageContent += ‘<li><a href="#" onclick="pageQuery(‘+(pageno+1)+‘)">下一页</a></li>‘; ???????????????????????????} ???????????????????????????????????????????????????????????????????????????????????$("#userDate").html(tableContent); ???????????????????????????$(".pagination").html(pageContent); ???????????????????????}else{ ???????????????????????????layer.msg("用户信息查询失败 ", {time:2000, icon:5, shift:6}, function(){ ???????????????????????????????????????????????????????????}); ???????????????????????}Ajax异步加载后台数据（换页面，加强用户体验所用）
原文地址：https://www.cnblogs.com/ggj12138/p/10350747.html