摘要：獲取按鈕元素并創(chuàng)建點(diǎn)擊事件。創(chuàng)建一個(gè)監(jiān)聽(tīng)對(duì)象，如果監(jiān)聽(tīng)對(duì)象的狀態(tài)返回值是4表示請(qǐng)求已經(jīng)完成并響應(yīng)就緒，再判斷一下如果返回的值是200說(shuō)明查詢成功。然后新建一個(gè)p標(biāo)簽用于輸出查詢狀態(tài)。var json = JSON.parse(xhr.responseText);是把從服務(wù)器發(fā)送過(guò)來(lái)的信息轉(zhuǎn)換成js格式。如果查詢的信息返回值是1說(shuō)明查詢到了對(duì)應(yīng)的信息直接輸出之前設(shè)定好的值，反之則依然。然后把登錄信息
獲取按鈕元素并創(chuàng)建點(diǎn)擊事件。
創(chuàng)建一個(gè)監(jiān)聽(tīng)對(duì)象，如果監(jiān)聽(tīng)對(duì)象的狀態(tài)返回值是4表示請(qǐng)求已經(jīng)完成并響應(yīng)就緒，再判斷一下如果返回的值是200說(shuō)明查詢成功。然后新建一個(gè)p標(biāo)簽用于輸出查詢狀態(tài)。var json = JSON.parse(xhr.responseText);是把從服務(wù)器發(fā)送過(guò)來(lái)的信息轉(zhuǎn)換成js格式。如果查詢的信息返回值是1說(shuō)明查詢到了對(duì)應(yīng)的信息直接輸出之前設(shè)定好的值，反之則依然。然后把登錄信息用剛才的p標(biāo)簽發(fā)送到頁(yè)面上再禁用按鈕功能，設(shè)置定時(shí)器對(duì)頁(yè)面進(jìn)行重定位跳轉(zhuǎn)。
設(shè)置請(qǐng)求方式為post，后臺(tái)路徑是include下的check.php文件，由于發(fā)送的是form表單請(qǐng)求，所以表單頭要修改一下xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
把需要發(fā)送驗(yàn)證對(duì)象的value值以字面量形式賦值給data，然后把data以json方式轉(zhuǎn)換一下數(shù)據(jù)賦值給data_json,由于直接發(fā)送的data_json數(shù)據(jù)沒(méi)有下標(biāo)，下面的data就是加上下標(biāo)進(jìn)行發(fā)送方便查詢
xhr.send('data='+data_json);database.php配置一下數(shù)據(jù)庫(kù)的信息
在check.php里載入數(shù)據(jù)庫(kù)信息文件并賦值給$db，使用PDO方式連接數(shù)據(jù)庫(kù)，使用json_decode($_POST['data'])方法接收post發(fā)送過(guò)來(lái)的數(shù)據(jù)并賦值給user，實(shí)例化并賦值郵箱和密碼字段并進(jìn)行數(shù)據(jù)庫(kù)查詢。
如果查詢到的數(shù)據(jù)==1說(shuō)明結(jié)果為真，那么就echo json_encode(['status'=>1,'msg'=>'登錄成功,正在跳轉(zhuǎn)...']) ;
輸出到前端頁(yè)面，前端頁(yè)面接收到數(shù)據(jù)后跳轉(zhuǎn)指定的admin.php頁(yè)面。
總結(jié)寫代碼過(guò)程中的錯(cuò)誤：前臺(tái)頁(yè)面如果使用的是div而不是form，并且js里使用的是div而不是forms的話查詢是沒(méi)有任何響應(yīng)的，并且在驗(yàn)證的php頁(yè)面里不能有輸出打印標(biāo)簽，否則前臺(tái)也不顯示。數(shù)據(jù)庫(kù)配置文件需要使用return方式返回，并且數(shù)組的[]最后要加；分號(hào)結(jié)尾。
前臺(tái)代碼：
<!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>表單提交系統(tǒng)</title>
<style>
*{
padding: 0;
margin: 0;
font-size: 14px;
}
form{
width: 260px;
margin:130px auto;
}
p{
margin: 20px 0;
}
p:first-child{
text-align: center;
font-weight: bold;
font-size: 22px;
}
p:last-child{
text-align: center;
}
</style>
</head>
<body>
<form>
<p>賬戶登錄系統(tǒng)</p>
<p>
<label>郵箱：</label>
<input type="email" name="email">
</p>
<p>
<label>密碼：</label>
<input type="password" name="password">
</p>
<p><button type="button">登錄</button></p>
</form>
<SCRIPT>
// 獲取按鈕
let btn = document.getElementsByTagName('button')[0];
// 創(chuàng)建按鈕點(diǎn)擊事件
btn.onclick = function (){
// 1.創(chuàng)建監(jiān)聽(tīng)對(duì)象
let xhr = new XMLHttpRequest();
// 2.監(jiān)聽(tīng)響應(yīng)狀態(tài)
xhr.onreadystatechange = function () {
// 如果獲取到的返回值是4說(shuō)明配置正確
// 0: 請(qǐng)求未初始化
// 1: 服務(wù)器連接已建立
// 2: 請(qǐng)求已接收
// 3: 請(qǐng)求處理中
// 4: 請(qǐng)求已完成，且響應(yīng)已就緒
if (xhr.readyState === 4) {
// 返回200表示查詢成功
if (xhr.status === 200) {
let p = document.createElement('p');
p.style.color = 'red';
// .responseText把服務(wù)器發(fā)送的信息提取出來(lái)使用JSON.parse把數(shù)據(jù)轉(zhuǎn)換成js對(duì)象格式。
var json = JSON.parse(xhr.responseText);
// 從后臺(tái)傳遞過(guò)來(lái)的數(shù)據(jù)如果查詢到是1說(shuō)明有數(shù)據(jù)如果是0說(shuō)明沒(méi)有數(shù)據(jù)內(nèi)容
if (json.status === 1) {
p.innerHTML = json.msg;
} else if (json.status == 0) {
p.innerHTML = json.msg;
}
// 把是否登錄成功提示信息發(fā)送到頁(yè)面上
document.forms[0].appendChild(p);
// 禁用按鈕
btn.disabled = true;
// 設(shè)置定時(shí)器，讓提示內(nèi)容顯示2秒跳轉(zhuǎn)。
setTimeout(function () {
document.forms[0].removeChild(p);
btn.disabled = false;
if (json.status == 1) {
location.href = 'admin.php';
}
}, 2000);
} else {
// 響應(yīng)失敗的提示
alert('響應(yīng)失敗' + xhr.status);
}
} else {
}
}
// 設(shè)置一下請(qǐng)求方式以及后臺(tái)文件
xhr.open('post','include/check.php',true);
// 這里需要修改表單頭提交信息欺騙一下瀏覽器
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// 發(fā)送請(qǐng)求給后臺(tái)
let data = {
email:document.getElementsByName('email')[0].value,
password:document.getElementsByName('password')[0].value
}
// 把data以json字符串方式發(fā)送給服務(wù)器
let data_json = JSON.stringify(data);
// 由于直接發(fā)送的data_json數(shù)據(jù)沒(méi)有下標(biāo)，下面的data就是加上下標(biāo)進(jìn)行發(fā)送方便查詢
xhr.send('data='+data_json);
}
</SCRIPT>
</body>
</html>后臺(tái)驗(yàn)證頁(yè)面代碼：
<?php
// 數(shù)據(jù)庫(kù)連接參數(shù)
$db = require 'database.php';
// 配置數(shù)據(jù)源DSN信息
$dsn = "{$db['type']}:host={$db['host']};dbname={$db['dbname']}";
// 連接數(shù)據(jù)庫(kù)
try {
$pdo = new PDO($dsn, $db['username'], $db['password']);
} catch (PDOException $e) {
die('Connection Failed: ' . $e->getMessage());
}
//測(cè)試一下是否能接收到數(shù)據(jù)
$user = json_decode($_POST['data']);
$email = $user->email;
$password = $user->password;
$sql = "SELECT COUNT(*) FROM `user` 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ò)誤,登錄失敗!']) ;
exit;
}數(shù)據(jù)庫(kù)配置代碼：
<?php // 數(shù)據(jù)庫(kù)連接參數(shù) return [ 'type' => 'mysql', 'host' => 'localhost', 'dbname' => 'user', 'username' => 'root', 'password' => 'root', ];
批改老師：查無(wú)此人批改時(shí)間：2019-04-23 13:49:51
老師總結(jié)：完成的不錯(cuò)。ajax用處比較大。特別是手機(jī)的列表頁(yè)，上拉加載更多。繼續(xù)加油。