22 注冊(cè)時(shí)使用Ajax驗(yàn)證用戶名是否有效

項(xiàng)目1會(huì)員管理系統(tǒng)任務(wù)19注冊(cè)時(shí)使用Ajax驗(yàn)證用戶名是否有效成都職業(yè)技術(shù)學(xué)院軟件學(xué)院主講教師：牟奇春?jiǎn)栴}的提出我們?cè)谧?cè)新用戶時(shí)，會(huì)要求用戶名唯一。因此，在后端寫入數(shù)據(jù)庫(kù)之前，需要先查詢數(shù)據(jù)庫(kù)中，當(dāng)前用戶名是否已經(jīng)被占用了。如果未被占用，則繼續(xù)寫入數(shù)據(jù)庫(kù)，如果已經(jīng)被占用，則彈出提示框，返回上一個(gè)頁面要求用戶修改用戶名。這樣做雖然沒什么問題，但用戶的體驗(yàn)卻不是太好。因?yàn)閺暮蠖朔祷厍岸隧撁鏁r(shí)，前端頁面中所填寫的密碼都被清空了，還需要重新輸入。如果我們?cè)谳斎胗脩裘院螅到y(tǒng)就可以自動(dòng)判斷當(dāng)前用戶名是否有有效，并給出相應(yīng)的提示，這種用戶體驗(yàn)就會(huì)好很多。問題的提出具體方法就是，使用Ajax異步方式，在輸入完用戶名后，就到數(shù)據(jù)庫(kù)中去查詢用戶名是否有效，然后給出提示。所謂異步操作，就是頁面不刷新，直接更新頁面中的部分內(nèi)容。推薦大家使用jQuery中封裝好的Ajax異步操作。什么是jQueryjQuery是一個(gè)快速、簡(jiǎn)潔的JavaScript框架，于2006年1月由JohnResig發(fā)布。jQuery設(shè)計(jì)的宗旨是“writeLess，DoMore”，即倡導(dǎo)寫更少的代碼，做更多的事情。它封裝JavaScript常用的功能代碼，提供一種簡(jiǎn)便的JavaScript設(shè)計(jì)模式，優(yōu)化HTML文檔操作、事件處理、動(dòng)畫設(shè)計(jì)和Ajax交互。什么是jQueryjQuery的核心特性可以總結(jié)為：具有獨(dú)特的鏈?zhǔn)秸Z法和短小清晰的多功能接口；具有高效靈活的CSS選擇器，并且可對(duì)CSS選擇器進(jìn)行擴(kuò)展；擁有便捷的插件擴(kuò)展機(jī)制和豐富的插件。jQuery兼容各種主流瀏覽器。jQuery的教程請(qǐng)參考：/jquery/index.asp什么是jQueryjQuery的下載：/plugin/122。這里可以下載到j(luò)Query的最新版本和各種歷史版本。當(dāng)然，也可以直接遠(yuǎn)程引用jQuery，比如百度壓縮版：/jquery/1.9.1/jquery.min.js相關(guān)代碼回到singup.php文件中。首先引用jQuery文件，在文檔后面添加如下代碼即可：接下來，修改一下用戶名表單：相關(guān)代碼我們添加了一個(gè)onblur的事件，當(dāng)用戶名控件失去焦點(diǎn)的時(shí)候，就執(zhí)行JavaScript方法checkUsername()。我們會(huì)在這個(gè)方法中，用Ajax異步方式去后端調(diào)用接口判斷當(dāng)前用戶名是否有效。在紅色*的后面，還添加了一個(gè)id為usernameMsg的span標(biāo)簽，這個(gè)標(biāo)簽的內(nèi)容，將會(huì)在Ajax方法中進(jìn)行添加，就是顯示當(dāng)前用戶名是否有效。接下來，制作JavaScript方法checkUsername()，其代碼如下：相關(guān)代碼相關(guān)代碼從第12行開始，就是Ajax進(jìn)行異步通信判斷用戶名是否可用的核心代碼。jQuery封裝的Ajax操作，可以攜帶多個(gè)參數(shù)，具體的內(nèi)容可以參考：/jquery/ajax-ajax.html相關(guān)代碼在我們的程序中，我們使用了以下參數(shù)：url：異步操作和后端通信的目標(biāo)文件，我們使用的是checkUsername.php，一會(huì)兒我們將完成這個(gè)文件的制作。type：表示程序提交數(shù)據(jù)的方式，和表達(dá)的method一樣，我們這里使用的是post方式提交。相關(guān)代碼在我們的程序中，我們使用了以下參數(shù)：dataType：這個(gè)參數(shù)是設(shè)置后端程序數(shù)據(jù)返回的格式，我們用的是json格式，便于對(duì)返回內(nèi)容的解析。data：前端往后端傳遞的參數(shù)，用json對(duì)象的格式來添加。我們的參數(shù)名是username，值是前面獲取的用戶填寫的用戶名。相關(guān)代碼success：Ajax異步通信程序執(zhí)行成功后的回調(diào)函數(shù)，函數(shù)中的參數(shù)data是后端返回的數(shù)據(jù)。在后端程序中，我們會(huì)返回一個(gè)code參數(shù)。如果當(dāng)前用戶名不可用，則后端返回的code為0，否則為2。在第18中，我們進(jìn)行了判斷，如果code為0，則在第20行中，行將id為usernameMsg的span標(biāo)簽中的文字設(shè)置成后端返回的msg，同時(shí)，使用removeClass方法移除css類black，并使用addClass方法添加css類green。如果code的值為2，則移除css類green，添加css類black。這兩個(gè)類的內(nèi)容很簡(jiǎn)單，就是設(shè)置文字顏色為css名稱所對(duì)應(yīng)的顏色，代碼如下：相關(guān)代碼接下來，創(chuàng)建文件checkUsername.php，其完整代碼如下：相關(guān)代碼這個(gè)文件就是Ajax通信的后端文件，其內(nèi)容和普通的php文件有一個(gè)最大的區(qū)別，那就是任何輸出，都要用JSON格式輸出，而不能直接用echo等方式輸出任何內(nèi)容。由于前端使用的type是post，因此，我們?cè)诘?行，用$_POST讀取前端傳遞過來的username參數(shù)。第4行是初始化，創(chuàng)建了一個(gè)空數(shù)組$a。在第5行中，判斷用戶是否有填寫username參數(shù)。如果未填寫，就給$a數(shù)組賦值，其中使用了兩個(gè)下標(biāo)，分別是code和msg，也就是關(guān)聯(lián)數(shù)組，然后分別賦值。這里給code賦值是1，我們?cè)谇岸瞬⑽磁袛噙@個(gè)1，只判斷了0和2。大家也可以在前端添加一點(diǎn)代碼，判斷一下后端返回1的情況。相關(guān)代碼第10行，是到數(shù)據(jù)表中去查詢當(dāng)前用戶名。這里的select后面查詢的列，不是數(shù)據(jù)表中的某個(gè)具體列，而是給的1，如果有查詢到，就會(huì)返回1。這是因?yàn)?，我們只需要判斷有沒有記錄，并不關(guān)心查詢到后返回什么內(nèi)容，這個(gè)返回的內(nèi)容本身也不會(huì)有任何地方使用到。第12行，是判斷結(jié)果集中的行數(shù)據(jù)量。如果為真，則說明不為0，也就是查詢到了，故在第14中行給code賦值為0，并在15行中給msg賦值為“此用戶可不可用”。否則，給code賦值為2，并給msg賦值為“此用戶名可用”。相關(guān)代碼最后，在第22行，使用了json_encode函數(shù)。json_encode函數(shù)的作用就是對(duì)變量進(jìn)行JSON編碼，以對(duì)象的形式將數(shù)組$a輸出，前端接收到這個(gè)對(duì)象后，就可以很方便地進(jìn)行數(shù)據(jù)解析了。與此相對(duì)應(yīng)的，還有一個(gè)json_decode()函數(shù)，其作用是對(duì)JSON