abstract：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title&g
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="dist/css/bootstrap.css">
<script src="jquery-3.3.1.js"></script>
<script src="dist/js/bootstrap.js"></script>
<style>
.content{width: 100%;height:100%;background: #aaa;}
.bg{background: #d4d6d6;}
.btn-content{padding: 300px 0;}
</style>
</head>
<body>
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-md-8 col-md-offset-2 bg">
<div class="btn-content">
<button class="btn btn-lg btn-danger center-block" data-toggle="modal" data-target="#login">别点击登录</button>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="login">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal"><span>x</span></button>
<h3 class="modal-title">用户登录</h3>
</div>
<div class="modal-body">
<form action="" class="form-horizontal">
<div class="form-group">
<label for="email" class="col-sm-2 control-label">邮箱:</label>
<div class="col-sm-10">
<input type="text" name="email" id="email" class="form-control">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">密码:</label>
<div class="col-sm-10">
<input type="password" name="password" id="password" class="form-control">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<div class="col-sm-10 col-sm-offset-2">
<span class="msg"></span>
<button class="btn btn-primary btn1">登录</button>
<button class="btn btn-info" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
</div>
<script>
var btnDiv = document.getElementsByClassName('btn-content')[0];
var btn = document.getElementsByClassName('btn1')[0];
btnDiv.style.height = document.documentElement.clientHeight+'px';
btnDiv.style.paddingTop = (document.documentElement.clientHeight/2-20)+'px';
btn.onclick = function(){
var xhr = new XMLHttpRequest(); //创建一个xhr对象
//监听响应状态
// console.log(xhr);
xhr.onreadystatechange = function () {
if(xhr.readyState == 4){
if(xhr.status == 200){
var spans = document.getElementsByClassName('msg')[0];
spans.style.color = 'red';
var json = JSON.parse(xhr.responseText);
if(json.status == 1){
spans.innerHTML = json.msg;
}else if(json.status == 0){
spans.innerHTML = json.msg;
}
btn.disabled = true; //禁用btn
setTimeout(function () {
btn.disabled = false;//恢复btn
spans.innerHTML = '';
if(json.status === 1){
window.location.href = 'admin.php';
}
},3000);
}else{
alert('响应失败!'.xhr.status);
}
}
}
//设置请求参数
xhr.open('post','inc/check.php',true);
//设置头信息将内容类型设置为表单提交方式
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//发送请求参数
var data = {
email :document.getElementsByName('email')[0].value,
password :document.getElementsByName('password')[0].value,
};
var data_json = JSON.stringify(data); //将js对象转为json字符串(其实就是文本)
//发送参数格式化成数组样式(依旧是字符串)
xhr.send('data='+data_json);
}
</script>
</body>
</html><?php
//登录验证;
$user = json_decode($_POST['data']); //将json字符串转为php对象
$email = $user->email;
$password = sha1($user->password);
$pdo = new PDO('mysql:host=127.0.0.1;dbname=zh','root','root');
//必须通过统计满足条件记录数来确定是否存在该用户
$sql = "SELECT COUNT(*) FROM `zh_user` WHERE `email`='{$email}' AND `password`='{$password}'";
$stmt = $pdo->prepare($sql);
$stmt->execute();
//判断是否验证成功?
if($stmt->fetchColumn(0) == 1){
//返回一个数组['status'=>1,'msg'=>'登陆成功,正在跳转...']转为json字符串
echo json_encode(['status'=>1,'msg'=>'登陆成功,正在跳转...']);
exit;
}else{
echo json_encode(['status'=>0,'msg'=>'邮箱或密码错误,请重试']);
exit;
}
