Ajax异步加载后台数据(换页面,加强用户体验所用)
发布时间:2020-12-16 02:58:33 所属栏目:百科 来源:网络整理
导读:主页面代码,转向需要显示数据的页面 a href="user/index"用户维护/a? 基于ssm框架的后端控制器代码,接收前端请求,转向预定的页面 @RequestMapping("/index" ) public String index() { return "user/index" ; } 这个时候就要在index.jsp中使用Ajax加载数
主页面代码,转向需要显示数据的页面 <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(){ }); } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |