老师，这里我这样写是不是对的呀，还请老师帮忙看一下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset='utf-8' />
<title>lesson4_cookie案例</title>
<style>
.loginRegistDiv {
text-align: center;
padding: 15px;
border: 1px solid black;
width: 300px;
min-height: 30px;
}
.welcomeDiv {
text-align: center;
padding: 15px;
border: 1px solid black;
width: 300px;
min-height: 30px;
display: none;
}
.nickNameSpan {
color: green;
font-size: 22px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="loginRegistDiv">
<label for="userName">
<span>用户名:</span><input type="text" id="userName" placeholder='请输入用户名'>
</label><br/>
<label for="password">
<span>密 码:</span><input type="text" id="password" placeholder='请输入密码'>
</label><br/><br/>
<button class="loginBtn">登录</button>
<button class="registBtn">注册</button>
</div>
<div class="welcomeDiv">
欢迎回来，尊敬的：
<span class='nickNameSpan'>哈哈哈</span>
<br/><br/>
<button class="exitBtn">注销登录</button>
</div>
<script>
//页面逻辑
;
(function() {
var loginBtn = document.querySelector('.loginBtn');
var userNameInput = document.querySelector('#userName');
var passwordInput = document.querySelector('#password');
var welcomeDiv = document.querySelector('.welcomeDiv');
var loginRegistDiv = document.querySelector('.loginRegistDiv');
var nickNameSpan = document.querySelector('.nickNameSpan');
var exitBtn = document.querySelector('.exitBtn');
//表示一个自动登录的功能
function getCookie() {
//获取cookie
var cookie = document.cookie;
// 分割成数组
var cookieArr = cookie.split(';');
var finalObj = {};
// 循环遍历，并存入对象
for (var i = 0; i < cookieArr.length; i++) {
var tempArr = cookieArr[i].trim().split('=');
finalObj[tempArr[0]] = tempArr[1];
}
return finalObj;
}
var cookieObj = getCookie();
if (cookieObj.nickName != undefined) {
if (cookieObj.nickName.length != 0) {
loginRegistDiv.style.display = 'none';
welcomeDiv.style.display = 'block';
nickNameSpan.innerHTML = cookieObj.nickName;
}
}
// 发送Ajax请求
loginBtn.onclick = function() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
// 解析
var data = JSON.parse(xhr.responseText);
// 成功后
if (data.loginStatusCode == 1) {
loginRegistDiv.style.display = 'none';
welcomeDiv.style.display = 'block';
nickNameSpan.innerHTML = data.nickName;
}
}
}
};
// 采用表单验证方式
var formData = new FormData();
formData.append('uname', userNameInput.value);
formData.append('upass', passwordInput.value);
xhr.open('post', '07cookie案例后台.php', true);
xhr.send(formData);
}
//退出登录按钮
exitBtn.onclick = function() {
// 清空
userNameInput.value = '';
passwordInput.value = '';
// 切换显示隐藏状态
loginRegistDiv.style.display = 'block';
welcomeDiv.style.display = 'none';
//清除cookie
var expires = new Date(new Date().getTime() + 1).toGMTString();
document.cookie = 'nickName=beixi;expires=' + expires;
}
})();
</script>
</body>
</html><?php
$success=array('msg'=>'ok');
$userName=$_POST['uname'];
$password=$_POST['upass'];
//连接数据库
$con = mysqli_connect('localhost','root','123456','lanmeipai');
if($con){
//修改字符集
mysqli_query($con,'set names utf8');
mysqli_query($con,'set character_set_client utf8');
mysqli_query($con,'set character_set_results utf8');
//查询数据库并连接
$sql = 'select * from loginuserinfo where 1';
$result = $con->query($sql);
//判断 读取数据库中的用户信息
// $result->num_rows>0-->有数据
if($result->num_rows>0){
$info=[];//创建一个空数组，来存放数据
for($i=0;$row=$result->fetch_assoc();$i++){
$info[$i]=$row;
}
//判断用户传来的用户名和密码是否在数据库里有着对应的信息
$flag=false;//标示符，默认登录失败
for($j=0;$j<count($info);$j++){
if($info[$j]['userName']==$userName){
if($info[$j]['password']==$password){
$success['infoCode']=0;
$success['nickName']=$username;
$flag=true;
break;
}
}
}
//当循环结束后，判断$flag的值
if(!$flag){
$success['infoCode']=1;
}
}else{
$success['infoCode']=3;
}
}else{
$success['infoCode']=2;//0代表登录成功，1代表登录失败，2代表数据库连接失败，3代表数据库为空
}
//登录成功之后对页面添加cookie
setcookie('nickName','beixi',time()+3600*24);
//回馈前端表示登录成功，使用状态码loginStatusCode 0表示失败 1表示成功
$success['loginStatusCode']=1;
$success['nickName']='beixi';
echo json_encode($success);
?>
京公网安备 11011402011233号