Ajax實作非同步使用者名稱驗證功能

當使用者填寫好帳號切換到密碼框的時候，使用ajax驗證帳號的可用性。這篇文章就主要為大家詳細介紹了Ajax實作非同步使用者名稱驗證功能，對ajax有興趣的夥伴們可以參考一下

先看看版面比較簡單，效果圖如下

ajax功能：

    當使用者填寫好帳號切換到密碼方塊的時候，使用ajax驗證帳號的可用性。檢驗的方法如下：先建立XMLHTTPRequest對象，然後將需要驗證的資訊（使用者名稱）傳送到伺服器端進行驗證，最後根據伺服器傳回狀態判斷使用者名稱是否可用。

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;
}

運行結果

#程式碼實作

index.html

使用Ajax实现异步登陆验证

账 号：


密 码：

login.php

<?php
  $con = mysqli_connect("localhost","root","GDHL007","sysu");
 
  if(!empty($_GET[&#39;account&#39;])){
    $sql1 = &#39;select * from login where account = "&#39;.$_GET[&#39;account&#39;].&#39;"&#39;;
    //数据库操作
    $result1 = mysqli_query($con,$sql1);
    if(mysqli_num_rows($result1)>0)
      echo &#39;<font style="color:#00FF00;">该用户存在</font>&#39;;
    else 
      echo &#39;<font style="color:#FF0000;">该用户不存在</font>&#39;;
    mysqli_close($con);
  }else
    echo &#39;<font style="color:#FF0000;">用户名不能为空</font>&#39;;
 
?>

以上就是本文的全部內容，希望對大家的學習有幫助。

相關推薦：

關於ajax網路請求的封裝實例

#Ajax回退刷新頁面問題的解決方案

Ajax請求和Filter配合案例詳解

#

以上是Ajax實作非同步使用者名稱驗證功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！