用户，角色，功能

登录页面js

    function login(){
        //获取账号密码输入框的值
        var uid = $('#uid').val();
        var pwd = $('#pwd').val();
        //传入后台
        $.ajax({
            type:"post",
            url:"chuli.php",
            async:true,
            data:{
                type:'login',
                uid:uid,
                pwd:pwd
            },
            dataType:'text',
            success:function(data){
                //当后台执行成功时跳转主页，否则弹窗密码错误
                if(data == 'ok'){
                    window.location.href = "renyuan.html";
                }else{
                    alert('密码错误');
                }
            }
        });
    }

主页html

    //放入用户uid的地方
        <input id="uid" type="hidden" value="">
        <button onclick="exit()">退出登录</button>
        //人员下拉
        <select id="renyuan" onchange="changeOcc()"></select>
        //角色多选框
        <div id="juese"></div>
        <button onclick="save()">保存</button>
        //功能位置
        <div id="gongneng"></div>

主页js

    $(function(){
        initUid();//放入隐藏input 用户的uid
        ajaxEvent();//加载用户下拉和角色多选框
        userToOcc();//用户对应角色选中
        gongneng();//功能显示
    })
    //放入隐藏input 用户的uid，异步进行
    function initUid(){
        $.ajax({
            type:"post",
            url:"chuli.php",
            async:false,
            data:{type:'initUid'},
            dataType:'text',
            success:function(data){
                //若session为空则跳转登录页面
                if(data == ""){
                    window.location.href = "login.html";
                }else{
                    //session有值则放入隐藏input
                    $('#uid').val(data);
                }
            }
        });
    }
    //退出登录，清空session并跳转登录页面
    function exit(){
        $.ajax({
            type:"post",
            url:"chuli.php",
            async:true,
            data:{type:'exit'},
            dataType:'text',
            success:function(data){
                if(data == 'ok'){
                    window.location.href = "login.html";
                }
            }
        });
    }
    //加载用户下拉和角色多选框
    function ajaxEvent(){
        //拿到数组（用户名，角色）
        $.ajax({
            type:"post",
            url:"chuli.php",
            async:false,
            data:{type:'userAocc'},
            dataType:'json',
            success:function(data){
                //console.log(data[0]);
                chuliData(data[0],data[1]);
            }
        });
    }
    //处理用户名和角色
    function chuliData(userArr,occArr){
        var strU="";
        var strO="";
        //循环添加下拉用户，value为用户id，内容为用户姓名
        for(var i = 0; i < userArr.length; i++){
            strU += "<option value='"+userArr[i][0]+"'>"+userArr[i][1]+"</option>"
        }
//        打印到页面
        $('#renyuan').html(strU);
        //循环添加多选框，value为角色id，内容为角色名
        for(var j = 0; j < occArr.length; j++){
            strO += "<label><input type='checkbox' value='"+occArr[j][0]+"' />"+occArr[j][1]+"</label>";
        }
        //打印到页面
        $('#juese').html(strO);
        
    }
    //用户对应角色选中
    function userToOcc(){
        //获取下拉菜单选中的用户的id
        var uid = $('#renyuan').val();
        //拿到此用户的角色数组
        $.ajax({
            type:"post",
            url:"chuli.php",
            async:true,
            data:{type:'userToOcc',uid:uid},
            dataType:'json',
            success:function(data){
                //console.log(data);
                chuliOcc(data);
            }
        });
    }
    //处理角色数组
    function chuliOcc(data){
        //所有多选框
        var dxk = $('#juese').find("input[type='checkbox']");
        //清空选中状态
        dxk.prop('checked',false);
        //循环用户角色
        for(var i = 0; i < data.length; i++){
            //遍历多选框，若多选框的id和用户角色id相同则选中
            dxk.each(function(){
                if($(this).val() == data[i][0]){
                    $(this).prop('checked',true);
                }
            })
        }
    }
    //当下拉改变时执行户对应角色选中函数
    function changeOcc(){
        userToOcc();
    }
    //保存
    function save(){
        var uid = $('#renyuan').val();
        var dxk = $('#juese').find("input[type='checkbox']");
        var occArr = [];
        
        dxk.each(function(){
            if($(this).prop('checked') == true){
                occArr.push($(this).val());
            }
        })
        $.ajax({
            type:"post",
            url:"chuli.php",
            async:true,
            data:{type:'save',uid:uid,occArr:occArr},
            dataType:'text',
            success:function(data){
                //console.log(data);
                if(data == 'ok'){
                    alert('更改成功');
                    userToOcc();
                }
            }
        });
    }
    function gongneng(){
        var uid = $('#uid').val();console.log(uid);
        var str ="";
        $.ajax({
            type:'post',
            url:'chuli.php',
            data:{
                type:'gongneng',
                uid:uid
            },
            dataType:'json',
            success:function(data){
                //console.log(data);
                for(var i = 0; i < data.length; i++){
                    str += "<div>"+data[i][0]+"</div>"
                }
                $('#gongneng').html(str);
            }
        })
    }