利用jQuery實(shí)現(xiàn)郵箱注冊時(shí)的重復(fù)用戶名查詢

Ajax 是一種在無需重新加載整個(gè)網(wǎng)頁的情況下，能夠更新部分網(wǎng)頁的技術(shù)。通過在后臺與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，Ajax 可以使網(wǎng)頁實(shí)現(xiàn)異步更新。這意味著可以在不重新加載整個(gè)網(wǎng)頁的情況下，對網(wǎng)頁的某部分進(jìn)行更新。——百度百科

jQuery提供了簡單的Ajax實(shí)現(xiàn)方法，

jQuery.get( url [, data ] [, success ] [, dataType ] )jQuery.post( url [, data ] [, success ] [, dataType ] ) 復(fù)制代碼

• url 類型:String 一個(gè)包含發(fā)送請求的URL字符串，通常是要進(jìn)行驗(yàn)證的后臺語言借口頁面。

• data 類型:PlainObject or String 一個(gè)普通對象或字符串，通過請求發(fā)送給服務(wù)器，就是要拿去被驗(yàn)證的參數(shù)。

• success 類型:Function( PlainObject data, String textStatus, jqXHR jqXHR ) 當(dāng)請求成功后執(zhí)行的回調(diào)函數(shù)。 如果提供dataType選項(xiàng)，那么這個(gè)success選項(xiàng)是必須的， 但這種情況下你可以使用null。回調(diào)函數(shù)中的data參數(shù)就是服務(wù)器響應(yīng)的全部內(nèi)容。

• dataType 類型:String 從服務(wù)器返回的預(yù)期的數(shù)據(jù)類型。默認(rèn)：智能猜測（xml, json, script, text，html）。

模仿126郵箱的注冊效果，利用jQuery實(shí)現(xiàn)用戶名的實(shí)時(shí)驗(yàn)證。首先需要在本地搭建服務(wù)器環(huán)境，這里使用了PHPnow，PHPnow可以同時(shí)創(chuàng)建Apache + PHP + MySQL，操作簡單，很適合我這種小白使用。因?yàn)樯婕暗津?yàn)證，要預(yù)先在數(shù)據(jù)庫中創(chuàng)建一個(gè)表，利用表中的用戶名進(jìn)行比較判斷。

思路：在input中輸入用戶名失去焦點(diǎn)后，在事件處理程序中利用jQuery的Ajax方法發(fā)送請求到服務(wù)器，請求中攜帶了填入input的值；在服務(wù)器的后臺接口頁面中，對請求中的參數(shù)與數(shù)據(jù)庫中獲取的用戶名進(jìn)行比較驗(yàn)證，并在響應(yīng)中攜帶一個(gè)值(存放在data中)，給前端做判斷。

• HTML和CSS只做了簡易的樣式，效果圖如下：

• Js部分

$("#clientName").blur(function(){//失去焦點(diǎn)后，get方法發(fā)送到后臺check.php接口頁面，攜帶的參數(shù)是input的val()$.get("system/check.php",{checkedName: $("#clientName").val()},function(data){//data返回的是服務(wù)器傳回的response，data的值用來判斷是否已經(jīng)存在此用戶名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("已經(jīng)被注冊");//如果已存在則不能注冊，將提交的按鈕disabled設(shè)置為true$("#btn").attr("diabled", true);}}) });$("#btn").click(function(){//提交按鈕添加點(diǎn)擊事件，post方法向服務(wù)器發(fā)送請求注冊，接口頁面是reg.php，攜帶的參數(shù)是填入表單的用戶名和密碼$.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");}}) }) 復(fù)制代碼

• PHP部分分為驗(yàn)證和注冊兩個(gè)文件

check.php<?php//定義變量存放獲取的用戶名$checkedName = $_GET("checkedName");//以下語句分別為：鏈接數(shù)據(jù)庫、選擇創(chuàng)建的數(shù)據(jù)庫、設(shè)置中文字符集、要執(zhí)行的sql命令、執(zhí)行、返回執(zhí)行結(jié)果的個(gè)數(shù)mysql_connect("localhost", "root", "123456");mysql_select_db("myfistdb");mysql_query("SET NAMES UTF8");//表示從clientNameForm表單中找到Cname等于獲取的用戶名的項(xiàng)$sql = "SELECT * FROM clientNameForm WHERE Cname = '{$checkedName}'";$result = mysql_query($sql);$numOfResult = mysql_num_rows($result);//通過結(jié)果個(gè)數(shù)返回用戶名是否存在if($numOfResult > 0 ){echo "existent";}else{echo "non-existent";} ?> 復(fù)制代碼reg.php<?php$names = $_POST["names"];$codes = $_POST["codes"];//以下語句分別為：鏈接數(shù)據(jù)庫、選擇創(chuàng)建的數(shù)據(jù)庫、設(shè)置中文字符集、要執(zhí)行的sql命令、執(zhí)行、返回執(zhí)行結(jié)果的個(gè)數(shù)mysql_connect("localhost","root","123456");mysql_select_db("student");mysql_query("SET NAMES UTF8");//表示向數(shù)據(jù)庫中的clientNameForm中添加$names和$codes的內(nèi)容分別到Cname,code兩項(xiàng)中$sql = "INSERT INTO clientNameForm (Cname,code) VALUE ('{$names}','{$codes}')";//執(zhí)行語句成功后，response中會返回?cái)?shù)值1$result = mysql_query($sql);if($result == 1){echo "success";}else{echo "fail";} ?> 復(fù)制代碼

效果圖：

1.用戶名已存在

2.用戶名可用

3.注冊成功

4.數(shù)據(jù)庫中成功添加的數(shù)據(jù)

小結(jié)：Ajax在現(xiàn)在的網(wǎng)站中無處不在，電商網(wǎng)站的圖片加載和長頁面的懶加載等都使用了Ajax，原生的Ajax方法還沒有去學(xué)，先利用jQuery把基本方法都弄清楚，再去了解原生。

轉(zhuǎn)載于:https://juejin.im/post/5a4ef23cf265da3e3f4c7d2d

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。