快捷導(dǎo)航

PHP+Ajax異步通訊實(shí)現(xiàn)用戶名郵箱驗(yàn)證是否已注冊(cè)( 2種方法實(shí)現(xiàn))

更新時(shí)間：2011年12月28日 21:36:58 作者：

在網(wǎng)站注冊(cè)用戶時(shí)使用，主要為了無(wú)刷新異步驗(yàn)證用戶輸入的用戶名或者Email是否已注冊(cè)。

前言
直接上代碼有點(diǎn)不厚道、于是按照天朝傳統(tǒng)，整段描述吧。。。。（本人語(yǔ)言表達(dá)能力有限，大家忍著看）
功能
在網(wǎng)站注冊(cè)用戶時(shí)使用，主要為了無(wú)刷新異步驗(yàn)證用戶輸入的用戶名或者Email是否已注冊(cè)。
這功能大家肯定見(jiàn)過(guò)，大多數(shù)網(wǎng)站都有的，我一直對(duì)這個(gè)功能很感興趣，所以這幾天研究了下 jQuery + Ajax
整了一個(gè)功能不算完善，但足以應(yīng)付普通使用的代碼 (更牛的功能大家自己去發(fā)掘)
文件說(shuō) 明
reg.php //為注冊(cè)頁(yè)面
check_user.php //為用戶驗(yàn)證頁(yè)面 (GET,POST方式任選)
jquery-1.7.1.js //為jQuery文件下載地址：http://code.jquery.com/jquery-1.7.1.js (右鍵另存為即可)
代碼示例
reg.php 注冊(cè)頁(yè)面（內(nèi)含2種方式，請(qǐng)任選一種）

復(fù)制代碼代碼如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>PHP+Ajax 異步通訊注冊(cè)驗(yàn)證</title> 
<script type="text/javascript" src="jquery-1.7.1.js"></script> <!--千萬(wàn)別忘記引用jQuery文件，否則無(wú)法執(zhí)行--> 
<script type="text/javascript"> 
$(function(){ 
//方式一 jQuery(普通應(yīng)用時(shí)推薦，簡(jiǎn)單易用) 
$("#user").blur(function(){ //文本框鼠標(biāo)焦點(diǎn)消失事件 
$.get("check_user.php?user="+$("#user").val(),null,function(data) //此處get方式 可換為post方式按需求調(diào)整，其他無(wú)需修改使用方式一樣 
{ 
$("#chk").html(data); //向ID為chk的元素內(nèi)添加html代碼 
}); 
}) 
//方式二 aJax方式 (比較復(fù)雜，如無(wú)特殊需求推薦使用方式一) 
$("#user").blur(function(){ 
$.ajax({ 
url:"check_user.php", //請(qǐng)求驗(yàn)證頁(yè)面 
type:"GET", //請(qǐng)求方式 可換為post 注意驗(yàn)證頁(yè)面接收方式 
data:"user="+$("#user").val(), //取得表文本框數(shù)據(jù)，作為提交數(shù)據(jù) 注意前面的 user 此處格式 key=value 其他方式請(qǐng)參考ajax手冊(cè) 
success: function(data) 
{ //請(qǐng)求成功時(shí)執(zhí)行操作 
$("#chk").html(data); //向ID為chk的元素內(nèi)添加html代碼 
} 
}); 
}) 
}) 
</script> 
</head> 
<body> 
<form id="reg" action="" method="post"> 
用戶名：<input id="user" type="text" /> <span id="chk"></span> 
</form> 
</body> 
</html> 

check_user.php 異步通信頁(yè)面代碼如下：

復(fù)制代碼代碼如下:

 
<?php 
header("Content-type:text/html;charset=gb2312"); 
//GET方式獲取數(shù)據(jù)（取決于異步提交時(shí)提交方式） 
if($_GET['user']) 
{ 
$user=$_GET['user']; 
//此處可進(jìn)行數(shù)據(jù)庫(kù)匹配，本次省略直接判斷 
if($user=="admin") 
echo "<font color=red>用戶名已被注冊(cè)！</font>"; 
else 
echo "<font color=red>用戶名可以使用</font>"; 
}else{} 
//POST方式獲取數(shù)據(jù)（取決于異步提交時(shí)提交方式） 
if($_POST['user']) 
{ 
$user=$_POST['user']; 
//此處可進(jìn)行數(shù)據(jù)庫(kù)匹配，本次省略直接判斷 
if($user=="admin") 
echo "<font color=red>用戶名已被注冊(cè)！</font>"; 
else 
echo "<font color=red>用戶名可以使用</font>"; 
}else{} 
?> 

上面的2種方式分別又存在 post 和 get 兩種方式，所以可以說(shuō)有4種方式選擇，應(yīng)該可以滿足普通應(yīng)用了。
另外關(guān)于Ajax 內(nèi)其他參數(shù)例如：請(qǐng)求數(shù)據(jù)類型，ajax開(kāi)始操作等等事件。請(qǐng)參考ajax手冊(cè)。這里不做闡述，較為復(fù)雜推薦使用第一種方式。
配圖：