解决ajax请求下，后台页面跳转无效问题

ajax实际上是通过XMLHttpRequest来向服务器发送异步请求的，从服务器获取数据，然后使用JS来更新页面，这也就是常说的局部刷新实现方式，所以ajax请求之后，服务器返回的都是纯文本流，客户端的浏览器在获取ajax异步结果时，不是直接显示在页面上，而是要通过js来进行处理，js处理完以后才能显示在页面上，所以这才导致了controller中的ModelAndView对象不能直接返回视图

解决方法：

将页面跳转的控制放到前端页面的js中来进行跳转，即location.href = 'xxxxxxx’

     $.ajax({
         url: "toMain",//请求路径
         type: "post",//请求方式
         data: {"username": name, "password": pwd},
         success: function (data)
         {
             alert(data);
             if(data==1)
             {
                 window.location.href="toRealMain";
             }
             else
             {
                 window.location.href="/";
             }
         }
     });

window.location.href的用法

layui数据表格的使用和分页失效的问题解决

<!--  数据表格    -->
                <table id="demo" lay-filter="test"></table>

            </div>
        </div>


</div>

<!-- 引入 layui.js -->
<script src="../js/layui.js"></script>
<script>
    layui.use(['element','table'], function(){
        var element = layui.element;
        var table = layui.table;
            //第一个实例
            table.render({
                elem: '#demo'
                ,height: 400//容器高度
                ,url: 'getAllUsers' //数据接口
                ,page: true //开启分页
                ,cols: [
                    [ //表头
                    {field: 'id', title: 'ID', width:150, sort: true, fixed: 'left'}
                    ,{field: 'useraccount', title: '用户名', width:150,sort:true}
                    ,{field: 'userpassword', title: '密码', width:150, sort: true}
                    ,{field: 'flag', title: '权限', width: 100,sort:true}
                    ,{field: 'powerofcourse', title: '课程权限', width: 200,sort:true}
                    ,{field: 'information', title: '信息', width: 200, sort: true}
                ]
                ]
                , method: "post"
                , page: true
                , limits: [3, 5, 10]  //一页选择显示3,5或10条数据
                , limit: 5  //一页显示10条数据
                , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据，res为从url中get到的数据
                    var result;
                    if (this.page.curr) {
                        result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
                    } else {
                        result = res.data.slice(0, this.limit);
                    }
                    return {
                        "code": res.code, //解析接口状态
                        "msg": res.msg, //解析提示文本
                        "count": res.count, //解析数据长度
                        "data": result //解析数据列表
                    };
                }
            });
    });

    //退出登录按钮点击
    $("#dropDown").click(function (){
        //置空令牌
        window.localStorage.xfxAdminToken="null";
        //发送请求跳转到登录页面
        //跳转到登录页面
        window.location.href="/";
        window.event.returnValue=false;
    })
    
</script>

controller层代码:

   //获取所有用户，并以json数组形式返回
    @ResponseBody
    @PostMapping("/getAllUsers")
    public String getAllManagers()
    {
        //获取所有管理员
        List<User> users = userService.list();
        String jsonString = JSON.toJSONString(users);
        System.out.println(jsonString);
        //状态码，响应消息，数量，数据
        String allManagers ="{\"code\":"+0+",\"msg\":\"ok\",\"count\":"+users.size()+",\"data\":"+jsonString+"}";
        return allManagers;
    }

layui中table展示后端数据

点了好多条都不知道说的什么，后面还是我自己总结出了解决的办法。table的渲染提供了一个后端接口的参数

在这里插入图片描述

然而这个接口要求后端的数据进行格式化的处理，然而这个会和分页功能产生冲突导致分页失效。layui还提供了data参数去渲染数据，建议使用layui的表格组件时不用url，直接用data去渲染数据，就是先请求后台，返回数据再render。

layui分页失效问题

layui数据表格分页无法正常显示

layui的数据表格的cols属性设置列的二维数组的[[…]]和thymeleaf的语法重复，因此在使用springboot的模板引擎进行渲染时，会报错误，解决方法如下：

         ,cols: [
                    [ //表头
                    {field: 'id', title: 'ID', width:150, sort: true, fixed: 'left'}
                    ,{field: 'useraccount', title: '用户名', width:150,sort:true}
                    ,{field: 'userpassword', title: '密码', width:150, sort: true}
                    ,{field: 'flag', title: '权限', width: 100,sort:true}
                    ,{field: 'powerofcourse', title: '课程权限', width: 200,sort:true}
                    ,{field: 'information', title: '信息', width: 200, sort: true}
                ]
                ]

将[[…]]分割开来写

从ajax的回调函数（success等）中取返回值

对于ajax，一般情况下我们都是在success函数中进行逻辑处理，
但是在某些特定的时候我们需要在ajax外对返回值进行处理，这时我们只需要进行下面两个操作：

1、async设置为false,也就是同步；

2、在方法内ajax外设置一个全局变量，用这个变量去接收success函数内的返回值。

//服务器端检测令牌是否可用
function  VerifyServerToken(type)
{
    if(type=="admin")
    {
        var ManagerName = "";
        //检验令牌
        $.ajax({
            url: "getManageName",
            type: "post",
            async : false,
            data: {"adminToken": window.localStorage.xfxAdminToken},
            success: function (name)
            {
                if (name.length <=0){
                    //令牌置空
                    window.localStorage.xfxAdminToken = "null";
                    window.location.href = "/";
                    window.event.returnValue = true;
                }
                ManagerName=name;
            }
        });
        return ManagerName;
    }
}

ajax是异步请求，如果上面不让ajax变成同步请求，那么先执行完return语句，过了一会，ajax请求和成功回调函数才会执行完

layui-table表复选框勾选的所有行数据获取

<table class="layui-table" lay-data="{url:'******', id:'test3'}" lay-filter="test3">

    <thead>
    <tr>
        <th lay-data="{type:'checkbox'}">ID</th>
        <th lay-data="{field:'id', width:80}">ID</th>
        <th lay-data="{field:'t1'}">测试项</th>
        <th lay-data="{field:'t2', edit: 'text'}">标定参数</th>
        <th lay-data="{field:'t3'}">标定值</th>
    </tr>
    </thead>
</table>

table.on('checkbox(test3)', function(obj){
            var checkStatus = table.checkStatus('test3');
            console.log(checkStatus.data)//选中行数据
            console.log(checkStatus.data.length)
            
            })
            
$('.ttes').click(function () {
            var index = parent.layer.getFrameIndex(window.name);
            var checkStatus = table.checkStatus('test3');
            console.log(checkStatus.data)//选中行数据
            var items = checkStatus.data;

        //监听行工具事件---监听删除按钮
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            //如果删除按钮按下了
            if (obj.event === 'del') {
                layer.confirm('确认删除当前管理员吗？', {
                    btn: ['删除', '取消']
                    , yes: function (index, layero) {
                        //点击删除按钮
                        //发送ajax请求前往服务器，去数据库中删除当前选择的管理员
                        $.ajax({
                            url: "delManagerById",
                            type: "post",
                            data: {"id": data.id,"adminToken":adminToken},
                            success: function (data) {
                                if (data == 0) {
                                    //删除成功
                                    layer.alert('删除成功', {icon: 1});
                                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                                }
                                else if(data==-1){
                                    //出现异常，删除失败
                                    layer.msg('出现异常，删除失败', {icon: 5});
                                }
                                else if(data==-2)
                                {
                                    //令牌失效
                                    window.localStorage.xfxAdminToken="null";
                                    window.location.href="/";
                                    window.event.returnValue=false;
                                }
                            }
                        });
                        layer.close(index);
                    }
                    , btn2: function (index, layero) {
                        //点击取消按钮
                        layer.close(index);
                    }
                });
            }
        });

        //复选框勾选事件
        table.on('checkbox(test)', function (obj) {
            var checkStatus = table.checkStatus('test');
            //删除被勾选的行元素集合
            //checkStatus.data:被选中的元素集合
            //checkStatus.data.length:被选中的元素个数

            //当头部工具栏的删除按钮被点击时，获取被选中元素集合，进行批量删除操作
            $("#topDelBtn").click(function () {
                //弹出确认是否删除的按钮
                layer.confirm('确认批量删除选中的管理员？', {
                    btn: ['确认', '取消'] //可以无限个按钮
                    , yes: function (index, layero) {
                        //删除
                        //获取删除用户的id集合
                        var arr = new Array();
                        for (i = 0; i < checkStatus.data.length; i++) {
                            arr[i] = checkStatus.data[i].id;
                        }
                        //发送ajax请求前往服务器执行批量删除的操作
                        $.ajax({
                            url: "delManagerByIds",
                            type: "post",
                            data: {"ids": arr,"adminToken":adminToken},
                            success: function (data) {
                                if (data == 0) {
                                    //删除成功
                                    layer.msg('删除成功', {icon: 6});
                                    //刷新当前页面
                                    window.location.href = "toListAll";
                                    window.event.returnValue = false;
                                }
                                else if (data == -1)
                                {
                                    //出现异常删除失败
                                    layer.msg('出现异常，删除失败，请重新尝试', {icon: 2});
                                }
                                else if(data==-2)
                                {
                                    //令牌失效
                                    window.localStorage.xfxAdminToken="null";
                                     window.location.href="/";
                                     window.event.returnValue=false;
                                }
                            }
                        });
                    },
                    btn2: function (index, layero) {
                        //取消
                        layer.msg('删除失败', {icon: 5});
                    }
                });
            });

        });

    });

html网页什么样的字体最好看，css设置各种中文字体样式代码

cookie，session，localStorage，sessionStorage的区别

隐藏div常用的两种方法

style里面设置内样式:

1.display:none;

2.visibility:hidden;

layui弹出层，弹出表单或其他东西

/!*
 如果是页面层
 */
layer.open({
  type: 1, 
  content: '传入任意的文本或html' //这里content是一个普通的String
});
layer.open({
  type: 1,
  content: $('#id') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
});
//Ajax获取
$.post('url', {}, function(str){
  layer.open({
    type: 1,
    content: str //注意，如果str是object，那么需要字符拼接。
  });
});
/!*
 如果是iframe层
 */
layer.open({
  type: 2, 
  content: 'http://sentsin.com' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
}); 
/!*
 如果是用layer.open执行tips层
 */
layer.open({
  type: 4,
  content: ['内容', '#id'] //数组第二项即吸附元素选择器或者DOM
});