abstract：將老師的登陸 查詢數(shù)據(jù)庫改為 查詢本地json文件<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Ajax實戰(zhàn):表單驗證</t
將老師的登陸 查詢數(shù)據(jù)庫改為 查詢本地json文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax實戰(zhàn):表單驗證</title>
</head>
<body>
<h3>用戶登錄</h3>
<form>
<p>郵箱: <input type="email" name="email"></p>
<p>密碼: <input type="password" name="password"></p>
<p><button type="button">提交</button></p>
</form>
<script>
let btn = document.getElementsByTagName('button')[0];
btn.onclick = function () {
//1.創(chuàng)建xhr對象
let xhr = new XMLHttpRequest();
//2.監(jiān)聽響應狀態(tài)
xhr.onreadystatechange = function(){
if (xhr.readyState === 4) { // 準備就緒
// 判斷響應結果:
if (xhr.status === 200) {
// 響應成功,通過xhr對象的responseText屬性可以獲取響應的文本,此時是html文檔內容
let p = document.createElement('p'); //創(chuàng)建新元素放返回的內容
p.style.color = 'red';
let json = JSON.parse(xhr.responseText);
if (json.status === 1) {
p.innerHTML = json.msg;
} else if (json.status == 0) {
p.innerHTML = json.msg;
}
// 將響應文本添加到新元素上
document.forms[0].appendChild(p); // 將新元素插入到當前頁面中
btn.disabled = true;
setTimeout(function(){
document.forms[0].removeChild(p);
btn.disabled = false;
if (json.status == 1) {
location.href = 'admin.php';
}
},2000);
} else {
// 響應失敗,并根據(jù)響應碼判斷失敗原因
alert('響應失敗'+xhr.status);
}
} else {
// http請求仍在繼續(xù),這里可以顯示一個一直轉來轉去的圖片
}
}
//3.設置請求參數(shù)
xhr.open('post','checklogin.php',true);
//4. 設置頭信息,將內容類型設置為表單提交方式
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
//4.發(fā)送請求
let data = {
email: document.getElementsByName('email')[0].value,
password: document.getElementsByName('password')[0].value
};
// data = 'email='+data.email+'&password='+data.password;
let data_json=JSON.stringify(data);
xhr.send('data='+data_json);
}
</script>
</body>
</html><?php
//print_r($_POST['data']);
//echo $data['email'];
$user = json_decode($_POST['data']);
//echo $user->email;
$email = $user->email;
$password = sha1($user->password);
//讀取json文件
$json = file_get_contents('userdata.json');
//json格式解析
$usersarr = json_decode($json,true);
$flag = '0';
foreach($usersarr as $usera){
if ($usera['username'] == $email && $usera['pwd'] == $password)
{
$flag = '1';
break;
}
}
if ($flag == '1') {
echo json_encode(['status'=>1,'msg'=>'登錄成功,正在跳轉...']) ;
exit;
} else {
echo json_encode(['status'=>0,'msg'=>'郵箱或密碼錯誤,登錄失敗!']) ;
exit;
}
Correcting teacher：天蓬老師Correction time：2019-01-29 11:38:13
Teacher's summary：流程很清楚, 前后端的交互都是異步的, 不會出現(xiàn)阻塞