html代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用戶名是否存在</title>
</head>
<body>
<form action="" method="post">
<table>
<tr>
<td>用戶名</td>
<td><input type="text" name="username" placeholder="請(qǐng)輸入用戶名" class="name" id="name" ></td>
<td><span class="note"></span></td>
</tr>
<tr>
<td>密碼</td>
<td><input type="password" name="password" class="pwd" ></td>
</tr>
<tr><td><input type="submit" id="check"></td></tr>
</table>
</form>
</body>
</html>
js代碼（當(dāng)鼠標(biāo)移開(kāi)用戶名標(biāo)簽時(shí)，ajax引擎自動(dòng)與后臺(tái)實(shí)現(xiàn)異步交互，從而完成驗(yàn)證）
<script type="text/javascript">
var name=document.getElementById('name');
var pwd=document.getElementsByClassName('pwd')[0];
document.querySelector('.name').onblur=function () {
document.querySelector('.note').innerHTML='驗(yàn)證中……';
//1.創(chuàng)建對(duì)象
var xhr=new XMLHttpRequest();
//2.設(shè)置請(qǐng)求行(get請(qǐng)求數(shù)據(jù)寫在url后面)
xhr.open('post','check.php');
//3.設(shè)置請(qǐng)求頭(get請(qǐng)求可以省略,post不發(fā)送數(shù)據(jù)也可以省略)
xhr.setRequestHeader('content-type',"application/x-www-form-urlencoded");
//3.5注冊(cè)回調(diào)函數(shù)
xhr.onload=function () {
if(xhr.status==200 && xhr.readyState==4)
{
console.log(xhr.responseText);
var data=JSON.parse(xhr.responseText);
console.log(data);
if(data.flag==3) {
document.querySelector('.note').innerHTML = data.msg;
}
}
};
//4.請(qǐng)求主體發(fā)送(get請(qǐng)求為空，或者寫null，post請(qǐng)求數(shù)據(jù)寫在這里，如果沒(méi)有數(shù)據(jù)，直接為空或者寫null)
//post請(qǐng)求發(fā)送數(shù)據(jù) 寫在send中
//key=value&key2=value2
xhr.send("username="+document.getElementById('name').value);
};
</script>
后臺(tái)php文件（check_username.php）：
<?php
//print_r($_POST);
$flag=0;
$msg='failure';
$username=isset($_POST['username'])?$_POST['username']:"";
$password=isset($_POST['password'])?$_POST['password']:"";
if($username==='admin'){
$flag=3;
$msg='用戶名正確';
}else {
$flag=3;
$msg='用戶名不存在';
}
?>
知識(shí)點(diǎn)-----AJAX - onreadystatechange 事件
當(dāng)發(fā)送一個(gè)請(qǐng)求后，客戶端需要確定這個(gè)請(qǐng)求什么時(shí)候會(huì)完成，因此，XMLHttpRequest對(duì)象提供了onreadystatechange事件機(jī)制來(lái)捕獲請(qǐng)求的狀態(tài)，繼而實(shí)現(xiàn)響應(yīng)。
當(dāng)請(qǐng)求被發(fā)送到服務(wù)器時(shí)，我們需要執(zhí)行一些基于響應(yīng)的任務(wù)。
每當(dāng)readyState改變時(shí)，就會(huì)觸發(fā)onreadystatechange事件。
readyState屬性存有 XMLHttpRequest 的狀態(tài)信息。
下面是 XMLHttpRequest 對(duì)象的三個(gè)重要的屬性：
注意：POST請(qǐng)求不加請(qǐng)求頭，數(shù)據(jù)是傳不到后臺(tái)的
二.提交時(shí)完成后用戶名與密碼的驗(yàn)證
創(chuàng)建一個(gè)后臺(tái)文件（check_login.php）用來(lái)驗(yàn)證用戶名與密碼
新建php文件check_login.php（用戶數(shù)據(jù)這里寫死，一般是從數(shù)據(jù)庫(kù)查詢得到的）
$username=isset($_POST['username'])?$_POST['username']:"";
$password=isset($_POST['password'])?$_POST['password']:"";
if($username=='admin' && $password==123){
$flag=1;
$msg='登錄成功';
} else {
$flag=2;
$msg='密碼錯(cuò)誤';
}
$response=[
'flag'=>$flag,
'msg'=>$msg,
];
echo json_encode($response);
在原來(lái)的登錄界面的js腳本里加入點(diǎn)擊時(shí)的驗(yàn)證
document.getElementById('check').onclick=function () {
var xhr=new XMLHttpRequest();
xhr.open('post','check_login.php');
xhr.setRequestHeader('content-type',"application/x-www-form-urlencoded");
xhr.onreadystatechange=function () {
if(xhr.readyState==4 && xhr.status==200){
var data=JSON.parse(xhr.responseText);
if(data.flag==1) {
alert(data.msg);
console.log(data);
}else if(data.flag==2){
alert(data.msg);
console.log(data);
}
}
};
xhr.send('username='+document.getElementById('name').value+'&password='+pwd.value);
}
【網(wǎng)站聲明】本站部分內(nèi)容來(lái)源于互聯(lián)網(wǎng),旨在幫助大家更快的解決問(wèn)題，如果有圖片或者內(nèi)容侵犯了您的權(quán)益，請(qǐng)聯(lián)系我們刪除處理，感謝您的支持！