登錄頁面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);
            }
        })
    }

用戶，角色，功能