Ajax异步加载后台数据（换页面，加强用户体验所用）

Posted 2021-02-07 ggj12138

主页面代码，转向需要显示数据的页面

<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;
    }    

View Code

前端对数据的渲染过程，代码为前面省略的内容

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(){
                                
                            });
                        }

View Code