<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>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">
<lable for="userName">
<span>用户名:</span><input type="text" id="userName" placeholder="请输入用户名">
</lable><br><br>
<lable for="password">
<span>密 码:</span><input type="text" id="password" placeholder="请输入密码">
</lable><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() {
var cookie=document.cookie;
var cookieArr=cookie.split(';');
// console.log(cookieArr);//得到的是数组 (2) ["uname=beixi", " userId=120123"]
var finalObj={};
for (var i=0;i<cookieArr.length;i++){
//trim()是去除空格
var tempArr=cookieArr[i].trim().split('=');
//console.log(tempArr);//(2) ["uname", "beixi"] (2) ["userId", "120123"]
finalObj[tempArr[0]]=tempArr[1];
}
return finalObj;
}
console.log(getCookie());
var cookieObj=getCookie();
//判断cookie存储的nickName是否存在
if (cookieObj.nickName!=undefined){
if (cookieObj.nickName.length!=0){
loginRegistDiv.style.display='none';
welcomeDiv.style.display='block';
nickNameSpan.innerHTML=cookieObj.nickName;
}
}
loginBtn.onclick=function () {
//发送Ajax请求
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function () {
if (xhr.readyState==4){
if (xhr.status==200){
var data=xhr.responseText;
if (data.infoCode==0){
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','7-cookie案例后台.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:
<?php
$success=array('msg'=>'ok');
$userName=$_POST['uname'];
$password=$_POST['upass'];
//连接数据库
try{
$con=new PDO('mysql:host=localhost;dbname=beixidb','root','');
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 userinfo where 1";
$result=$con->query($sql);
//解析查询的结果
if($result->num_rows>0){
$info=[];
for($i=0;$row=$result->fetch_assoc();$i++){
$info[$i]=$row;
}
//$success['infoCode']=$info;//拿到数据了
//得到解析数组后，判断用户发来的内容是否存在于数据库中
$flag=0;//只要执行break，就变为1，否则一直为0
for($j=0;$j<count($info);$j++){
//判断是否与当前条目的用户名相同
if($info[$j]['username']==$username){
//如果相同，继续判断是否是当前条目的密码
if($info[$j]['password']==$password){
$success['infoCode']=0;
$flag=1;
break;
}
}
}
if($flag==0){
$success['infoCode']=1;
}
}else{
$success['infoCode']=1;
}
}else{
//向前台返回信息
//0代表登录成功，1代表登录失败，2代表数据库连接失败
$success['infoCode']=2;
}
}catch(PDOException $err){
echo '出现错误信息:'.$err->getMessage();
}
setcookie('nickName','beixi',time()+3600*24);
//回馈前端表示登录成功，使用状态码infoCode 0表示成功 1表示失败
$success['infoCode']=0;
$success['nickName']='beixi';
echo json_encode($success);
?>老师，我总觉得我的优点问题，但是又找不到代码出错的地方，老师帮忙看看呗，谢谢老师
京公网安备 11011402011233号