php使用ajax實現註冊賬號時判斷賬號是否已經存在
阿新 • • 發佈:2019-01-03
在寫註冊介面的時候,比如賬號輸入框,我們要實現的功能不僅僅是判斷有沒有輸入,或者說是格式對不對,還需要進行的一步操作便是對賬號是否已經存在進行判斷;對於這個功能其實也挺簡單實現,就是在form表單的提交頁面進行資料庫查詢操作。而這樣做便是要提交一次頁面,但我們平時在註冊的時候也碰到過這樣的網站,在我們剛輸入賬號的時候,後面的就有提示框告訴你這個使用者是否可以使用。兩者一相比,後者所實現的效果肯定比前者實現的效果好很多,要實現這樣的功能便需要掌握ajax的相關知識了。
簡單介紹一下ajax:
AJAX即“Asynchronous Javascript And XML”(非同步JavaScript和XML),是指一種建立互動式<tr> <td style="width:100px;"> 賬 號: </td> <td style="width:250px;"> <input type="text" name="userid" id="userid" class="form-control" placeholder="User Id"/> </td> <td style="width:200px;"> <span id="useridSpan" style="color:#F00; font-size:9px;">*6-18位字母或數字</span> </td> </tr>
然後是js的程式碼:
<script language="javascript"> var xmlHttp; var useridObj=document.getElementById("userid"); useridObj.onblur=checkUserid;//onblur是指當離開輸入框是所觸發的事件 //這個函式可以直接拷過去用 function S_xmlhttprequest() { if(window.ActiveXObject) { xmlHttp = new ActiveXObject('Microsoft.XMLHTTP'); } else if(window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } } //這個函式就是你要進行賬號判斷時所要實現的功能 function checkUserid(){ var useridValue = trim(useridObj.value); var useridRegex = /^\w{6,18}$/; var span = document.getElementById("useridSpan"); var msg =" <img src='../images/loading.jpg' style='width:12px'>"; if(useridValue == null || useridValue == "") { msg ="<font color='red'>賬號不能為空!</font>"; } else if(!useridRegex.test(useridValue)) { msg ="<font color='red'>賬號長度不正確!</font>"; } //檢查賬號時候存在 else { S_xmlhttprequest(); //這裡是非同步運行了,當js執行到這一句話後不會等待他的返回值,而是直接往下進行,我測試出來的效果是當你js程式碼執行完了這裡的值才返回來。 xmlHttp.open("POST","regist_ajax_form.php?id="+useridValue,true);//這個頁面便是你要進行選擇查詢的PHP頁面 xmlHttp.onreadystatechange = byphp;//接受返回值 xmlHttp.send(null); } span.innerHTML = msg; } //接受返回值,xmlHttp.readyState一共有五種狀態,想了解具體情況可以去百度查詢 function byphp() { var msg; if(xmlHttp.readyState==1)//等於1是指還未獲取返回值的意思 { document.getElementById('useridSpan').innerHTML = " <img src='../images/loading.jpg' style='width:12px'>"; } else { var byphp100 = xmlHttp.responseText;//接受PHP的返回值 document.getElementById('useridSpan').innerHTML = byphp100; //設定span裡的內容 } } </script>
然後是PHP的程式碼,也就是js程式碼中的regist_ajax_php
<?php
if($_GET['id'])
{
sleep(1);//為了顯示等待檢測這麼一個動態效果,所以這裡等待一秒執行
include("connection.php");
$sql = "select * from userform where userid='$_GET[id]'";
$result = mysql_query($sql);
//這裡的echo輸出的內容便是將要返回給之前byphp()這個函式的值
if(is_array(mysql_fetch_row($result)))
{
echo "使用者名稱已經存在!";
}
else
{
echo " <img src='../images/true.gif' style='width:12px'>";
}
}
?>
注意:採用ajax是進行非同步執行的,也就是說js和xmlHttp.open()開啟的php頁面是同時進行的,要是想實現表單提交再次進行判斷的時候要注意返回值的問題。 差不多就這些了,我也是才接觸ajax,只是會應用,因為一個非同步執行的原因,導致checkUserid的返回值除了問題,以至於表單的submit事件一直出錯,也是除錯了好久才發現了這個問題。如果有什麼錯誤的地方,希望各位能指出來,並且十分歡迎大家一起討論,共同學習。