摘要： <!DOCTYPE html> <html> <head> <title>Ajax原理實線</title> <meta charset="utf-8"> </head> <body> <form accept-charset="
<!DOCTYPE html>
<html>
<head>
<title>Ajax原理實線</title>
<meta charset="utf-8">
</head>
<body>
<form accept-charset="utf-8">
<label>郵箱：</label>
<input type="email" name="email" id="email"><br><br>
<label>密碼</label>
<input type="password" name="password" placeholder="" id="password"><br>
<input type="button" name="" value="提交" id='btn'><br>
</form>
<script type="text/javascript">
// 1.創(chuàng)建Ajax對象
// let email = document.getElementById("email");
// let e = email.value
// let password = ;
// console.log(password)
let btn = document.getElementById("btn");
btn.onclick= function(){
let xhr = new XMLHttpRequest();
// 2.啟動監(jiān)聽
xhr.onreadystatechange = function () {
if (xhr.readyState=== 4 ){
//請求成功需要操作的內(nèi)容
if (xhr.status===200) {
// 響應(yīng)成功
let ps = document.createElement('p');
let enjson = JSON.parse(xhr.responseText); //JSON.parse()方法可以將服務(wù)器發(fā)送過來的JSON格式解析成JS的對象
if (enjson['status']===1) {
ps.innerHTML=enjson['msg'];
}else if (enjson['status']===0){
ps.innerHTML=enjson['msg'];
}
document.body.appendChild(ps);
setTimeout(function(){ //計時器
location.href='admin.php';
}, 2000)
}else {
// 響應(yīng)失敗
}
}else{
// 如果請求在繼續(xù)那么可以輸出一張圖片
}
}
let json = {
email:document.getElementById("email").value,
password:document.getElementById("password").value
}
json = JSON.stringify(json); //將JS對象轉(zhuǎn)為字符串
// 3.發(fā)送請求
xhr.open('post', 'check.php', true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //POST要修改請求頭
xhr.send("data="+json);//手動添加一個鍵，拼接json變量的值，發(fā)送到服務(wù)器
}
</script>
</body>
</html><?php
$data = $_POST['data'];
$data = json_decode($data);
$email = $data->email;
$password = $data->password;
$dbh = new PDO('mysql:host=127.0.0.1;dbname=php','root','root');
$sql="SELECT `password`,`email`,`name` FROM `user` WHERE `email`=:email AND `password`=:password";
$stmt = $dbh->prepare($sql);
$stmt->bindparam(':password',$password,PDO::PARAM_STR);
$stmt->bindparam(':email',$email,PDO::PARAM_STR);
$stmt->execute();
$user = $stmt->fetch(PDO::FETCH_ASSOC); //由數(shù)據(jù)返回值，沒有返回false
if ($user) {
session_start(); //啟動會話
$_SESSION['username']= $user['name']; //生成會話標(biāo)識。
echo json_encode(['status'=>1,'msg'=>'登陸成功正在跳轉(zhuǎn)']); //json_encode函數(shù)將數(shù)組格式化為JSON格式。
}else{
echo json_encode(['status'=>0,'msg'=>'登陸失敗']);
}
?>
批改老師：天蓬老師批改時間：2019-04-22 10:04:09
老師總結(jié)：php誕生時的主要用途, 就是進行服務(wù)器端的表單驗證的, 所有, 從表單驗證來實習(xí), 是一個最佳的辦法, 這里面有很多的有趣的知識點...
ajax是從用戶體驗上, 對表單驗證進行處理..., 并不是什么新技術(shù), 只是對已存在的技術(shù)一個優(yōu)化或應(yīng)用范圍的擴展...