Background set a cookie written, Front reading the written page to the cookie, interspersed js judge
Reception:
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.dl{
border:solid 1px black;
width:300px;
}
.dl2{
border:solid 1px black;
width:300px;
display: none;
}
.uname{
font-size: 30px;
color:green;
font-weight: bolder;
}
</style>
</head>
<body>
<div class='dl'>
用户名:<input type="text" class='un'><br>
密码:<input type="text" class='up'><br>
<button>登录</button></div>
<div class='dl2'>
<span>欢迎回来,尊敬的:</span><span class='uname'>哈哈哈</span>
</div>
<script>
(function(){
var btn=document.querySelector('button');
var div1=document.querySelector('.dl');
var unInput=document.querySelector('.un');
var upInput=document.querySelector('.up');
var wel=document.querySelector('.uname');
var div2=document.querySelector('.dl2');
//读取cookie内容
var cookieArr=document.cookie.split(';');
var obj={};
for(var i=0;i<cookieArr.length;i++)
{
var tempArr=cookieArr[i].trim().split('=');
obj[tempArr[0]]=tempArr[1];
}
//判断cookie内容，有值表示已经登陆过
if(obj['uname2'].length!=0)
{
btn.parentNode.style.display='none';
div2.style.display='block';
wel.innerHTML=obj.uname2;
}
//注销操作即删除cookie,并将页面变回未登录状态
btn.onclick=function()
{
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.readyState==4)
{
if(xhr.status==200)
{
var obj=JSON.parse(xhr.responseText);
if(obj.code==1)
{
btn.parentNode.style.display='none';
div2.style.display='block';
wel.innerHTML=obj.uname;
}
}
}
}
var data=new FormData();
data.append('uname',unInput.value);
data.append('upwd',upInput.value);
xhr.open('post','6.php',true);
xhr.send(data);
}
})()
</script>
</body>
</html>
php background:
<?php
$uname=$_POST['uname'];
$upwd=$_POST['upwd'];
//登录成功添加cookie
setcookie('uname2','mark',time()+3600*24);
//登录成功状态码0失败,1成功
$success['code']=1;
$success['uname']=$uname;
echo json_encode($success);
?>
