利用jQuery實現郵箱注冊時的重復用戶名查詢

Ajax 是一種在無需重新加載整個網頁的情況下，能夠更新部分網頁的技術。通過在后臺與服務器進行少量數據交換，Ajax 可以使網頁實現異步更新。這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新?！俣劝倏?/p>

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把基本方法都弄清楚，再去了解原生。

轉載于:https://juejin.im/post/5a4ef23cf265da3e3f4c7d2d

總結

以上是生活随笔為你收集整理的jQuery的Ajax方法实现注册邮箱时用户名查询的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。