利用jQuery實現郵箱註冊時的重複使用者名稱查詢
Ajax 是一種在無需重新載入整個網頁的情況下，能夠更新部分網頁的技術。通過在後臺與伺服器進行少量資料交換，Ajax 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。——百度百科
jQuery提供了簡單的Ajax實現方法，
jQuery.get( url [, data ] [, success ] [, dataType ] )
jQuery.post( url [, data ] [, success ] [, dataType ] )
複製程式碼-
url 型別:String 一個包含傳送請求的URL字串，通常是要進行驗證的後臺語言藉口頁面。
-
data 型別:PlainObject or String 一個普通物件或字串，通過請求傳送給伺服器，就是要拿去被驗證的引數。
-
success 型別:Function( PlainObject data, String textStatus, jqXHR jqXHR ) 當請求成功後執行的回撥函式。 如果提供dataType選項，那麼這個success選項是必須的， 但這種情況下你可以使用null。回撥函式中的data引數就是伺服器響應的全部內容。
-
dataType 型別:String 從伺服器返回的預期的資料型別。預設：智慧猜測（xml, json, script, text，html）。
模仿126郵箱的註冊效果，利用jQuery實現使用者名稱的實時驗證。首先需要在本地搭建伺服器環境，這裡使用了PHPnow，PHPnow可以同時建立Apache + PHP + MySQL，操作簡單，很適合我這種小白使用。因為涉及到驗證，要預先在資料庫中建立一個表，利用表中的使用者名稱進行比較判斷。
思路：在input中輸入使用者名稱失去焦點後，在事件處理程式中利用jQuery的Ajax方法傳送請求到伺服器，請求中攜帶了填入input的值；在伺服器的後臺介面頁面中，對請求中的引數與資料庫中獲取的使用者名稱進行比較驗證，並在響應中攜帶一個值(存放在data中)，給前端做判斷。
- HTML和CSS只做了簡易的樣式，效果圖如下：
- Js部分
$("#clientName").blur(function(){
//失去焦點後，get方法傳送到後臺check.php介面頁面，攜帶的引數是input的val()
$.get("system/check.php",{
checkedName: $("#clientName").val()
},function(data){
//data返回的是伺服器傳回的response，data的值用來判斷是否已經存在此使用者名稱
if(data == "non-existent"){
$("#info").show().css({
"width": 200,
"background": "lightyellow",
"color": "green"
}).html("恭喜，可以註冊");
//如果可以註冊，取消提交按鈕的disabled
$("#btn").attr("diabled", false);
}else if(data == "existent"){
$("#info").show().css({
"width": 200,
"background": "lightyellow",
"color": "red"
}).html("已經被註冊");
//如果已存在則不能註冊，將提交的按鈕disabled設定為true
$("#btn").attr("diabled", true);
}
})
});
$("#btn").click(function(){
//提交按鈕新增點選事件，post方法向伺服器傳送請求註冊，介面頁面是reg.php，攜帶的引數是填入表單的使用者名稱和密碼
$.post("system/reg.php", {
names: $("#checkedName").val(),
codes: $("#codes").val()
},function(data){
if(data == "success"){
alert("success");
$("#checkedName ,#codes").val("");
$("#info").hide();
}else{
alert("fail");
}
})
})
複製程式碼- PHP部分分為驗證和註冊兩個檔案
check.php
<?php
//定義變數存放獲取的使用者名稱
$checkedName = $_GET("checkedName");
//以下語句分別為：連結資料庫、選擇建立的資料庫、設定中文字符集、要執行的sql命令、執行、返回執行結果的個數
mysql_connect("localhost", "root", "123456");
mysql_select_db("myfistdb");
mysql_query("SET NAMES UTF8");
//表示從clientNameForm表單中找到Cname等於獲取的使用者名稱的項
$sql = "SELECT * FROM clientNameForm WHERE Cname = '{$checkedName}'";
$result = mysql_query($sql);
$numOfResult = mysql_num_rows($result);
//通過結果個數返回使用者名稱是否存在
if($numOfResult > 0 ){
echo "existent";
}else{
echo "non-existent";
}
?>
複製程式碼reg.php
<?php
$names = $_POST["names"];
$codes = $_POST["codes"];
//以下語句分別為：連結資料庫、選擇建立的資料庫、設定中文字符集、要執行的sql命令、執行、返回執行結果的個數
mysql_connect("localhost","root","123456");
mysql_select_db("student");
mysql_query("SET NAMES UTF8");
//表示向資料庫中的clientNameForm中新增$names和$codes的內容分別到Cname,code兩項中
$sql = "INSERT INTO clientNameForm (Cname,code) VALUE ('{$names}','{$codes}')";
//執行語句成功後，response中會返回數值1
$result = mysql_query($sql);
if($result == 1){
echo "success";
}else{
echo "fail";
}
?>
複製程式碼效果圖：
1.使用者名稱已存在
2.使用者名稱可用
3.註冊成功
4.資料庫中成功新增的資料
小結：Ajax在現在的網站中無處不在，電商網站的圖片載入和長頁面的懶載入等都使用了Ajax，原生的Ajax方法還沒有去學，先利用jQuery把基本方法都弄清楚，再去了解原生。