abstract：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>$.post()</titl
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$.post()</title>
</head>
<body>
<h3>用戶登陸</h3>
<form>
<p><label for="email">郵箱：</label><input type="email" id="email" name="email"></p>
<p><label for="password">密碼：</label><input type="password" id="password" name="password"></p>
<p><button type="button">提交</button></p>
</form>
<script src="lib/jquery-3.3.1.min.js"></script>
<script>
let btn=document.getElementsByTagName('button')[0];
btn.onclick = function () {
//1.創(chuàng)建xhr對象
let xhr = new XMLHttpRequest();
//2.監(jiān)聽響應(yīng)狀態(tài)
xhr.onreadystatechange = function () {
//判斷是否獲取到響應(yīng)的數(shù)據(jù)
if(xhr.readyState ===4){
if(xhr.status ===200){
//在頁面創(chuàng)建一個新元素用來顯示響應(yīng)的數(shù)據(jù)
let p = document.createElement('p');
p.style.color='red';
let 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;
}
document.forms[0].appendChild(p);
btn.disabled=true;
setTimeout(function(){
document.forms[0].removeChild(p);
btn.disabled = false;
if (json.status == 1) {
location.href = 'inc/admin.php';
}
},2000)
}else {
alert('響應(yīng)失敗'.xhr.status);
}
}else {
//http請求正在繼續(xù)，這里可以放一個gif動圖提示用戶
}
};
//3.設(shè)置請求參數(shù)
xhr.open('post','inc/check4.php',true);
//4.設(shè)置頭信息，將內(nèi)容類型設(shè)置為表單提交方式
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//5.發(fā)送請求
let data = {
email:document.getElementsByName('email')[0].value,
password:document.getElementsByName('password')[0].value
};
let data_json = JSON.stringify(data);
xhr.send('data='+data_json);
}
</script>
</body>
</html><?php
header("Content-type: text/html; charset=utf-8");
//echo json_encode('測試數(shù)據(jù)');
//連接數(shù)據(jù)庫并驗(yàn)證用戶
//print_r($_POST);
$email = htmlspecialchars(trim($_POST['email']));
$password = sha1(htmlspecialchars(trim($_POST['password'])));
//print_r($password);
//到數(shù)據(jù)庫中去驗(yàn)證用戶提交的數(shù)據(jù)
$pdo = new PDO('mysql:host=localhost;dbname=laoshi','root','root');
$sql = "SELECT COUNT(*) FROM `user` WHERE `email`= :email AND `password`= :password";
$stmt = $pdo->prepare($sql);
$stmt->execute(['email'=>$email,'password'=>$password]);
if($stmt->fetchColumn(0) == 1){
$status = 1;
$message='驗(yàn)證通過';
}else{
$status = 0;
$message='郵箱或密碼錯誤';
}
echo json_encode(['status'=>$status,'message'=>$message]);花了2周才成功實(shí)現(xiàn)，主要是后端沒學(xué)習(xí)，一開始數(shù)據(jù)庫里的password字符的位數(shù)設(shè)置成30，所以一直都不對，后來設(shè)置成50就實(shí)現(xiàn)了，password使用sha1()加密后是40位的
Correcting teacher：韋小寶Correction time：2019-01-14 09:50:04
Teacher's summary：恩 寫的沒毛病 代碼的注釋也很清晰 可以考慮使用jQuery和ajax來進(jìn)行改寫哦 jQuery和ajax來進(jìn)行異步無刷新提交就方便的多咯