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有異步和同步，異步是指：當用戶做了很多的操作，而不是等到服務器返回數據后在進行操作下一步。同步的話：當用戶操作了這一件事，沒等到服務器返回的請求不能進行下一步的操作！

如果我的思路不對，請老師點一下！謝謝

總結

以上是生活随笔為你收集整理的ajax登录验证的原理,ajax用户登录验证-get和post提交方式，与工作原理—2018-8-15...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。