摘要：<!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">別點(diǎn)擊登錄</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">用戶(hù)登錄</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">關(guān)閉</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(); //創(chuàng)建一個(gè)xhr對(duì)象
//監(jiān)聽(tīng)響應(yīng)狀態(tài)
// 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;//恢復(fù)btn
spans.innerHTML = '';
if(json.status === 1){
window.location.href = 'admin.php';
}
},3000);
}else{
alert('響應(yīng)失敗!'.xhr.status);
}
}
}
//設(shè)置請(qǐng)求參數(shù)
xhr.open('post','inc/check.php',true);
//設(shè)置頭信息將內(nèi)容類(lèi)型設(shè)置為表單提交方式
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//發(fā)送請(qǐng)求參數(shù)
var data = {
email :document.getElementsByName('email')[0].value,
password :document.getElementsByName('password')[0].value,
};
var data_json = JSON.stringify(data); //將js對(duì)象轉(zhuǎn)為json字符串(其實(shí)就是文本)
//發(fā)送參數(shù)格式化成數(shù)組樣式(依舊是字符串)
xhr.send('data='+data_json);
}
</script>
</body>
</html><?php
//登錄驗(yàn)證;
$user = json_decode($_POST['data']); //將json字符串轉(zhuǎn)為php對(duì)象
$email = $user->email;
$password = sha1($user->password);
$pdo = new PDO('mysql:host=127.0.0.1;dbname=zh','root','root');
//必須通過(guò)統(tǒng)計(jì)滿(mǎn)足條件記錄數(shù)來(lái)確定是否存在該用戶(hù)
$sql = "SELECT COUNT(*) FROM `zh_user` WHERE `email`='{$email}' AND `password`='{$password}'";
$stmt = $pdo->prepare($sql);
$stmt->execute();
//判斷是否驗(yàn)證成功?
if($stmt->fetchColumn(0) == 1){
//返回一個(gè)數(shù)組['status'=>1,'msg'=>'登陸成功,正在跳轉(zhuǎn)...']轉(zhuǎn)為json字符串
echo json_encode(['status'=>1,'msg'=>'登陸成功,正在跳轉(zhuǎn)...']);
exit;
}else{
echo json_encode(['status'=>0,'msg'=>'郵箱或密碼錯(cuò)誤,請(qǐng)重試']);
exit;
}
