ajax php免密登陆
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>login</h1>
<form action="">
<h3 style="display:none;">login failed</h3>
username: <input type="text" name="username" autocomplete="off"><br>
password: <input type="text" name="password" autocomplete="off"><br>
<button>submit</button>
</form>
<script>
const username=document.querySelector('input[name=username]')
const password=document.querySelector('input[name=password]')
const form=document.querySelector('form')
const h3=document.querySelector('h3')
form.addEventListener('submit',e=>{
e.preventDefault()
if(!username.value || !password.value) return alert('incomplete form')
const xhr=new XMLHttpRequest()
xhr.open('POST','./login.php')
xhr.onload=function(){
result=JSON.parse(this.responseText)
const {code}=result
console.log(result,code,typeof code)
if(code===0){
window.location.href='./cart.html'
}else if(code!==0){
h3.style.display='block'
}
}
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')
xhr.send(`username=${username.value}&password=${password.value}`)
})
</script>
</body>
</html>
login.php
<?php
if(!isset($_POST['username']) || !isset($_POST['password'])){
$arr=array("message"=>"incomplete","code"=>1);
echo json_encode($arr);
exit;
};
$username=$_POST['username'];
$password=$_POST['password'];
$link=mysqli_connect('localhost','root','cruces','abate');
$sql="select * from users where username='$username' and password='$password'";
$result=mysqli_query($link,$sql);
$data=mysqli_fetch_all($result,MYSQLI_ASSOC);
if(count($data)){
$arr=array(
"message"=>"login success",
"code"=>0
);
session_set_cookie_params(50,session_name(),session_id());
session_start();
$_SESSION['login']=1;
}else{
$arr=array(
"message"=>"login failed",
"code"=>1
);
}
echo json_encode($arr);
?>
cart.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
const xhr=new XMLHttpRequest()
xhr.open('GET','./cart.php',false)
xhr.onload=function(){
const {code}=JSON.parse(this.responseText)
console.log(code,this.responseText,typeof this.responseText)
if(code!==0){
window.location.href='./login.html'
}
}
xhr.send()
</script>
</head>
<body>
<h1>cart</h1>
<h2>need to login,if not login,window.location.href='./login.html'</h2>
</body>
</html>
cart.php
<?php
session_start();
if(!isset($_SESSION['login'])){
$arr=array(
"message"=>'need to login',
"code"=>1,
"wares"=>[]
);
echo json_encode($arr);
exit;
}
$arr=array(
"message"=>'logined',
"code"=>0,
"wares"=>[1,2,3]
);
echo json_encode($arr);
?>
