在寫註冊界面的時候,比如賬號輸入框,我們要實現的功能不僅僅是判斷有沒有輸入,或者說是格式對不對,還需要進行的一步操作便是對賬號是否已經存在進行判斷;對於這個功能其實也挺簡單實現,就是在form表單的提交頁面進行數據庫查詢操作。而這樣做便是要提交一次頁面,但我們平時在註冊的時候也碰到過這樣的網站,在我們剛輸入賬號的時候,後面的就有提示框告訴你這個用戶是否可以使用。兩者一相比,後者所實現的效果肯定比前者實現的效果好很多,要實現這樣的功能便需要掌握ajax的相關知識了。
簡單介紹一下ajax:
<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.οnblur=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頁面是同時進行的,要是想實現表單提交再次進行判斷的時候要注意返回值的問題。