ajax用戶登錄驗證：
實例
html>
Ajax實戰:表單驗證用戶登錄
郵箱:?
密碼:?
提交
let?btn?=?document.getElementsByTagName('button')[0];
btn.onclick?=?function?()?{
//1.創建xhr對象
let?xhr?=?new?XMLHttpRequest();
//2.監聽響應狀態
xhr.onreadystatechange?=?function(){
//?準備就緒
if?(xhr.readyState?===?4)?{
//?判斷響應結果:
if?(xhr.status?===?200)?{
let?p?=?document.createElement('p');??//創建新元素放返回的內容
p.style.color?=?'red';
//?將服務器端返回的json字符串轉為js對象
let?json?=?JSON.parse(xhr.responseText);
//?如果json.statu?==?1?表示查詢成功
if?(json.statu?===?1)?{
p.innerHTML?=?json.msg;
}?else?if?(json.statu?==?0)?{
p.innerHTML?=?json.msg;
}
//?將響應文本添加到新元素上
document.forms[0].appendChild(p);
//?把點擊過的按鈕禁用掉
btn.disabled?=?true;
//?定時器，把提示的信息2秒后消失
setTimeout(function(){
//?將提示信息刪除
document.forms[0].removeChild(p);
//?啟動按鈕
btn.disabled?=?false;
if?(json.statu?==?1)?{
//?跳轉
location.href?=?'admin.php';
}
},2000);
}?else?{
//?響應失敗,并根據響應碼判斷失敗原因
alert('響應失敗'+xhr.status);
}
}?else?{
//?http請求仍在繼續,這里可以顯示一個一直轉來轉去的圖片
}
}
//3.設置請求參數
xhr.open('post','inc/demo.php',true);
//4.?設置頭信息,將內容類型設置為表單提交方式
xhr.setRequestHeader('Content-Type',?'application/x-www-form-urlencoded');
let?data?=?{
email:document.getElementsByName('email')[0].value,
password:document.getElementsByName('password')[0].value
};
//?將js對象轉為json字符串
let?data_json=JSON.stringify(data);
//4.發送請求
xhr.send('data='+data_json);
}
運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
inc/demo.php處理數據文件：
實例
//?將json字符串轉為php對象
$user?=?json_decode($_POST['data']);
$email?=?$user->email;
$password?=?$user->password;
//?數據庫驗證用戶
$pdo?=?new?PDO('mysql:host=127.0.0.1;dbname=php','root','root');
//?滿足條件的記錄數
$sql?=?"SELECT?COUNT(*)?FROM?`lianxi`?WHERE?`email`='{$email}'?AND?`password`='{$password}'";
//?預處理對象
$stmt?=?$pdo->prepare($sql);
//?執行語句
$stmt->execute();
//判斷記錄數是否存在
if($stmt->fetchColumn(0)?==?1){
echo?json_encode(['statu'=>1,'msg'=>'登錄成功，正在跳轉...']);
exit;
}else{
echo?json_encode(['statu'=>0,'msg'=>'郵箱或密碼錯誤，請重新輸入...']);
exit;
}
運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
ajax提交get和post方式：
get方式：
實例
html>
get方式郵箱：
密碼：
提交
let?bth?=?document.getElementsByName('button')[0];
bth.onclick?=?function?()?{
let?email?=?document.getElementsByName('email')[0].value;
let?password?=?document.getElementsByName('password')[0].value;
let?xhr?=?new?XMLHttpRequest();
//?email和password是input控件的name值
let?url?=?'inc/demo1.php?email='+email+'&password='+password;
//第一個參數是以什么方式發送????第二個發送的url???第三個是否異步默認true(異步)
xhr.open('get',url,true);
xhr.send(null);
//當狀態碼為4的時候為請求處理完成，返回結果
xhr.onreadystatechange?=?function?()?{
if(xhr.readyState?===?4){
console.log(xhr.responseText);?//xhr.responseText接收返回的數據
}
}
}
運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
post方式：
實例
html>
post方式郵箱：
密碼：
提交
let?bth?=?document.getElementsByName('button')[0];
bth.onclick?=?function?()?{
let?email?=?document.getElementsByName('email')[0].value;
let?password?=?document.getElementsByName('password')[0].value;
let?xhr?=?new?XMLHttpRequest();
//?email和password是input控件的name值
let?url?=?'inc/demo1.php?email='+email+'&password='+password;
//第一個參數是以什么方式發送????第二個發送的url???第三個是否異步默認true(異步)
xhr.open('post',url,true);
//?post方式要設置請求頭信息
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send('email='+email+'&password='+password);
//當狀態碼為4的時候為請求處理完成，返回結果
xhr.onreadystatechange?=?function?()?{
if(xhr.readyState?===?4){
console.log(xhr.responseText);?//xhr.responseText接收返回的數據
}
}
}
運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
inc/demo1.php處理數據提交文件：
實例
//編碼
header("Content-type:?text/html;?charset=utf-8");
//?get獲取數據
$a?=?$_GET['email'];
$b?=?$_GET['password'];
//?post獲取數據
$a?=?$_POST['email'];
$b?=?$_POST['password'];
echo?'郵箱：'.$a.'密碼：'.$b;
運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
ajax工作原理：
當用戶提交數據后，頁面不會發生跳轉，保持當前的頁面，但是數據已經提交到服務器，當服務器處理用戶提交的數據后，然后返回前端也就是用戶點擊提交數據的界面。前端看起來并沒有發生什么，但是數據已經發生了改變。
比如說用戶登錄時提交了登錄的表單，而這些數據急速的請求到服務器中，等服務器接收處理后便返回了前端，很明顯的給用戶提示，提升用戶體驗。
ajax有異步和同步，異步是指：當用戶做了很多的操作，而不是等到服務器返回數據后在進行操作下一步。同步的話：當用戶操作了這一件事，沒等到服務器返回的請求不能進行下一步的操作！
如果我的思路不對，請老師點一下！謝謝
也要重寫hashCode())
