用户，角色，功能

登录页面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();//功能显示
    })
    //请求后台，拿到登录时session里的uid，放入隐藏input，异步进行
    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();
        //通过登录用户的id，拿到此用户的角色数组，成功后调用chuliOcc()
        $.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(){
        //获取下拉人员id
        var uid = $('#renyuan').val();
        //获取多选框
        var dxk = $('#juese').find("input[type='checkbox']");
        //定义空数组存选中的多选框的角色id
        var occArr = [];
        //遍历多选框，如果多选框选中则追加到数组
        dxk.each(function(){
            if($(this).prop('checked') == true){
                occArr.push($(this).val());
            }
        })
        //传入用户id和角色数组，修改数据库成功后重新执行角色多选框选择函数
        $.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(){
        //获取隐藏域的uid
        var uid = $('#uid').val();
        var str ="";
//        通过uid连表查功能，打印到页面
        $.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);
            }
        })
    }

php页面

    $db = new MySQLi('localhost','root','1','quanxian');
    !mysqli_connect_error() or die ('连接错误');
    $db->query('set names utf8');
    
    session_start();
    $type = $_POST['type'];
    switch($type){
        //主页隐藏input保存uid
        case 'initUid':
            $uid = $_SESSION['uid'];
            echo $uid;
        break;
        //获取用户和角色
        case 'userAocc':
            //查用户uid和name 放数组1
            $sql = "select uid,name from user";
            $res = $db->query($sql);
            $userArr = $res->fetch_all();
            //查角色表的角色id和角色名 放数组2
            $sql = "select * from juese";
            $res = $db->query($sql);
            $occArr = $res->fetch_all();
            //合成一个数组返回
            $attr = array($userArr,$occArr);
            echo json_encode($attr);
        break;
        //根据登录用户查找此人的角色
        case 'userToOcc':
            $uid = $_POST['uid'];
            $sql = "select jueseid from user_juese where userid = '$uid'";
            $res = $db->query($sql);
            $attr = $res->fetch_all();
            echo json_encode($attr);
        break;
        //保存修改后的角色
        case 'save':
            //获取拿到的用户id和用户角色
            $uid = $_POST['uid'];
            $occArr = $_POST['occArr'];
            //删除此用户所有的角色
            $sql = "delete from user_juese where userid = '$uid'";
            $res = $db->query($sql);        
            //遍历角色，重新给用户添加他的角色
            foreach($occArr as$v){
                $sql = "insert into user_juese (userid,jueseid) value('$uid','{$v}')";
                $res = $db->query($sql);
            }
            if($res)echo 'ok';
        break;
        //登录，拿到输入的uid 和pwd，当数据库的pwd等于用户输入时，登录成功
        case 'login':
            $uid = $_POST['uid'];
            $pwd = $_POST['pwd'];
            $sql = "select pwd from user where uid = '$uid'";
            $res = $db->query($sql);
            $attr = $res->fetch_row();
            if($pwd == $attr[0]){
                $_SESSION['uid'] = $uid;
                echo 'ok';
            }else{
                echo 'no';
            }
        break;
        //退出清空uid的全局变量
        case 'exit':
            $_SESSION['uid'] = "";
            echo 'ok';
        break;
        //功能拿到uid，三表联查功能
        case 'gongneng':
            $uid = $_POST['uid'];
            $sql = "select name from gongneng where code in(select gnid from juese_gongneng where jueseid in (select jueseid from user_juese where userid = '$uid'))";
            $res = $db->query($sql);
            $attr = $res->fetch_all();
            echo json_encode($attr);
        break;
    }