abstrakt：用戶登錄的簡單驗證功能，利用數(shù)組來模擬實現(xiàn)（ajax+json）<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> &nbs
用戶登錄的簡單驗證功能，利用數(shù)組來模擬實現(xiàn)（ajax+json）
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>用戶登錄驗證</title>
<link rel="stylesheet" href="dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<form class="form-horizontal" style="margin-top:10px;">
<div class="form-group">
<label for="email" class="col-sm-2 control-label">郵箱</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="email" id="email" placeholder="請輸入郵箱">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">密碼</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="password" id="password" placeholder="密碼">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="btn btn-success">登錄</button>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10" id="check">
</div>
</div>
</form>
</div>
</div>
</div>
<script>
let btn = document.getElementsByTagName('button')[0];
//console.log(btn);
btn.onclick = function(){
//1.創(chuàng)建xhr對象 首先第一步 要new一個xhr出來。
let xhr = new XMLHttpRequest();
//2.監(jiān)聽響應狀態(tài) onreadystatechange
xhr.onreadystatechange = function(){
//readyState 等于4 為就緒狀態(tài)
if(xhr.readyState === 4){
//判斷響應結(jié)果是否為200
if(xhr.status === 200){
//響應成功，通過xhr對象的responseText獲取響應文本
//創(chuàng)建元素存放內(nèi)容時使用
let p = document.createElement('p');
p.style.color = 'red';
//JSON.parse服務器響應字符串數(shù)據(jù)轉(zhuǎn)化成json對象 console.log(xhr.responseText);
let json = JSON.parse(xhr.responseText);
//利用InnerHTML方式寫入到新元素P上
if (json.status === 1) {
p.innerHTML = json.msg;
} else if (json.status === 0) {
p.innerHTML = json.msg;
}
// 將響應文本添加到新元素上
document.getElementById('check').appendChild(p); // 將新元素插入到當前頁面中
//將按鈕禁用，防止多次點擊
btn.disabled = true;
//設置延時2秒鐘
setTimeout(function(){
document.getElementById('check').removeChild(p);
btn.disabled = false;
if (json.status === 1) {
location.href = 'admin.php';
}
},2000);
}else {
// 響應失敗,并根據(jù)響應碼判斷失敗原因
alert('響應失敗' + xhr.status);
}
}else{
//不為4 請求一直繼續(xù)
}
}
//3.設置請求參數(shù)
xhr.open('post','demo1.php',true);
//4.設置請求頭信息，將內(nèi)容模擬成表單提交方式
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//5.發(fā)送請求信息
let data = {
email: document.getElementById('email').value,
password : document.getElementById('password').value
};
//JSON.stringify() 方法是將一個JavaScript值(對象或者數(shù)組)轉(zhuǎn)換為一個 JSON字符串
let data_json=JSON.stringify(data);
xhr.send('data='+data_json);
//xhr.send(null);
}
</script>
</body>
</html>demo1.php
<?php
$arr = array("email"=>"admin@126.com","password"=>"123456");
//print_r($_POST['data']);
//echo $data['email'];
$user = json_decode($_POST['data']);
$email = $user->email;
//$password = sha1($user->password);
$password = $user->password;
if ($arr['email'] == $email && $arr['password'] == $password ) {
echo json_encode(['status'=>1,'msg'=>'登錄成功,正在跳轉(zhuǎn)...']) ;
exit;
} else {
echo json_encode(['status'=>0,'msg'=>'郵箱或密碼錯誤,登錄失敗!']) ;
exit;
}admin.php
<?php echo "<h3>我是一個后臺</h3>";
Korrigierender Lehrer：天蓬老師Korrekturzeit：2019-01-15 14:24:43
Zusammenfassung des Lehrers：ajax交互, 不刷新頁面的也可以實現(xiàn)數(shù)據(jù)更新, ajax重點是在js對象的解析與dom操作