摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Ajax實(shí)戰(zhàn)：表單驗(yàn)證</t
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax實(shí)戰(zhàn)：表單驗(yàn)證</title>
</head>
<body>
<h3>用戶登錄</h3>
<form>
<p>郵箱：<input type="text" name="email"></p>
<p>密碼：<input type="password" name="password"></p>
<p><button type="button">登錄</button></p>
</form>
<script type="text/javascript">
let btn=document.getElementsByTagName('button')[0];
btn.onclick=function(){
let xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.readyState===4){
if(xhr.status===200){
//在頁面中動(dòng)態(tài)生成一個(gè)元素顯示響應(yīng)數(shù)據(jù)
let p=document.createElement('p');
p.style.color='red';
//將服務(wù)器返回的json字段轉(zhuǎn)換為js對(duì)象
json=JSON.parse(xhr.responseText);
//如果json.status==1,表示查詢成功
if(json.status==1){
p.innerHTML=json.msg;
}else if(json.status==0){
p.innerHTML=json.msg;
}
//將數(shù)據(jù)添加到表單中
document.forms[0].appendChild(p);
btn.setAttribute('disabled','true');
setTimeout(function(){
document.forms[0].removeChild(p);
btn.disabled=true;
//如果登陸成功就跳轉(zhuǎn)到網(wǎng)站后臺(tái)
if(json.status==1){
location.href='admin.php';
}
},2000);
}else{
alert('相應(yīng)失敗',xhr.status);
}
}else{
//服務(wù)器還在準(zhǔn)備中，一個(gè)gif圖片
}
};
xhr.open('post','inc/check.php',true);
//4.設(shè)置頭信息，將內(nèi)容類型設(shè)置為表單提交
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//5.發(fā)送數(shù)據(jù)
let data={
email:document.getElementsByName('email')[0].value,
password:document.getElementsByName('password')[0].value
};
let data_json=JSON.stringify(data)//將js對(duì)象轉(zhuǎn)為json字符串(文本)
// data = 'email='+data.email+'&password='+data.password;
//xhr.send(data_json);
xhr.send('data='+data_json);
btn.disabled=true;
}
</script>
</body>
</html>check.php
<?php
//登錄驗(yàn)證
//print_r($_POST);//可以將接收到的鍵值對(duì)：鍵=值，轉(zhuǎn)為數(shù)組元素
//json_decode(json字符串)：將json字符串轉(zhuǎn)為php對(duì)象
$user=json_decode($_POST['data']);
$email=$user->email;
$password=$user->password;
//到數(shù)據(jù)庫驗(yàn)證用戶提交信息
$pdo=new PDO('mysql:host=127.0.0.1;dbname=edu','root','31415926');
//必須通過統(tǒng)計(jì)滿足條件記錄數(shù)來
$sql="SELECT COUNT(*) FROM `login` WHERE `email`='{$email}' AND `password`='{$password}'";
$stmt=$pdo->prepare($sql);
$stmt->execute();
//判斷是否成功
if($stmt->fetchColumn(0)==1){
echo json_encode(['status'=>1,'msg'=>'登錄成功，正在跳轉(zhuǎn)...']);
exit;
}else{
echo json_encode(['status'=>0,'msg'=>'郵箱或者密碼錯(cuò)誤，請(qǐng)檢查！']);
exit;
}總結(jié)：通過這幾節(jié)課，對(duì)json和ajax有了深刻的認(rèn)識(shí)，并且學(xué)會(huì)了ajax的使用，這個(gè)無刷新表單驗(yàn)證案例鞏固了前幾節(jié)課的知識(shí)，使得理解更加深刻，總之，達(dá)到了理論與實(shí)踐的統(tǒng)一，收獲滿滿，好開森，我會(huì)更努力的學(xué)下去的。