登录页面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; }