先看看布局比較簡(jiǎn)單，效果圖如下
ajax功能：
當(dāng)用戶填寫(xiě)好賬號(hào)切換到密碼框的時(shí)候，使用ajax驗(yàn)證賬號(hào)的可用性。檢驗(yàn)的方法如下：首先創(chuàng)建XMLHTTPRequest對(duì)象，然后將需要驗(yàn)證的信息（用戶名）發(fā)送到服務(wù)器端進(jìn)行驗(yàn)證，最后根據(jù)服務(wù)器返回狀態(tài)判斷用戶名是否可用。
function checkAccount(){
var xmlhttp;
var name = document.getElementById("account").value;
if (window.XMLHttpRequest)
xmlhttp=new XMLHttpRequest();
else
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.open("GET","login.php?account="+name,true);
xmlhttp.send();
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 xmlhttp.status==200)
document.getElementById("accountStatus").innerHTML=xmlhttp.responseText;
}
運(yùn)行結(jié)果
代碼實(shí)現(xiàn)
index.html
!DOCTYPE html>
html>
head>
meta charset="UTF-8">
title>Ajax登陸驗(yàn)證/title>
script type="text/javascript">
function checkAccount(){
var xmlhttp;
var name = document.getElementById("account").value;
if (window.XMLHttpRequest)
xmlhttp=new XMLHttpRequest();
else
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.open("GET","login.php?account="+name,true);
xmlhttp.send();
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 xmlhttp.status==200)
document.getElementById("accountStatus").innerHTML=xmlhttp.responseText;
}
}
/script>
/head>
body>
div id="content">
h2>使用Ajax實(shí)現(xiàn)異步登陸驗(yàn)證/h2>
form>
賬 號(hào)：input type="text" id="account" autofocus required onblur="checkAccount()">/input>span id="accountStatus">/span>br>br>
密 碼：input type="password" id="password" required>/input>span id="passwordStatus">/span>br>br>
input type="submit" value="登陸">/input>
/form>
/div>
/body>
/html>
login.php
?php
$con = mysqli_connect("localhost","root","GDHL007","sysu");
if(!empty($_GET['account'])){
$sql1 = 'select * from login where account = "'.$_GET['account'].'"';
//數(shù)據(jù)庫(kù)操作
$result1 = mysqli_query($con,$sql1);
if(mysqli_num_rows($result1)>0)
echo 'font style="color:#00FF00;">該用戶存在/font>';
else
echo 'font style="color:#FF0000;">該用戶不存在/font>';
mysqli_close($con);
}else
echo 'font style="color:#FF0000;">用戶名不能為空/font>';
?>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。
您可能感興趣的文章:- yii2 modal彈窗之ActiveForm ajax表單異步驗(yàn)證
- Ajax異步方式實(shí)現(xiàn)登錄與驗(yàn)證
- Ajax實(shí)現(xiàn)異步刷新驗(yàn)證用戶名是否已存在的具體方法
- Ajax實(shí)現(xiàn)的異步傳輸與驗(yàn)證示例代碼
- ajax jquery 異步表單驗(yàn)證示例代碼
- PHP+Ajax異步通訊實(shí)現(xiàn)用戶名郵箱驗(yàn)證是否已注冊(cè)( 2種方法實(shí)現(xiàn))
- jquery ajax 登錄驗(yàn)證實(shí)現(xiàn)代碼
- jquery+ajax驗(yàn)證不通過(guò)也提交表單問(wèn)題處理
- Ajax 用戶名驗(yàn)證是否存在
- ajax同步驗(yàn)證單號(hào)是否存在的方法
