使用Ajax和JSON實現註冊時候驗證使用者名稱是否存在的功能
阿新 • • 發佈：2018-12-02
功能實現的思路：當通常一個網站需要註冊使用者資訊的時候，往往會讓使用者起一個名字，但一般要求這個使用者名稱稱是不能重複的，為了判斷新註冊的使用者填寫的使用者名稱是否已經存在，需要對填寫的使用者名稱稱進行判斷，實際專案開發時候註冊成功的使用者資訊會存入資料庫中，真正的判斷是需要和資料庫資料進行對比來決定使用者名稱是否已經存在，但我這裡僅僅是模擬這個功能，所以在後臺對使用者輸入的使用者名稱的處理比較簡單，直接讓他和一個字串進行對比（手動滑稽），和字串一樣的話就提示使用者這個使用者名稱已經存在，不存在也會友善提醒使用者這個名字可以使用。
1、設計使用者註冊介面：
1 <table> 2 <tr> 3 <th>使用者註冊</th> 4 </tr> 5 <tr> 6 <td>使用者名稱：</th> 7 <td> 8 <input type="text" id="userName" name="userName" onblur="checkUserName()"/> 9 <font id="img"></font>10 </td> 11 </tr> 12 <tr> 13 <td>密碼：</th> 14 <td><input type="password" id="password1" name="password1"/></td> 15 </tr> 16 <tr> 17 <td>確認密碼：</th> 18 <td><input type="password" id="password2" name="password2"/></td> 19 </tr> 20 <tr> 21 <td><input type="submit" id="sb" value="註冊"/></td> 22 <td><input type="button" id="button" value="重置密碼" onclick="czmima()"/></td> 23 </tr> 24 </table>
2、利用Ajax技術實現請求向後臺伺服器的訪問以及對返回結果的處理功能：
1 <script type="text/javascript"> 2 //簡單的實現使用者名稱和密碼重置的功能 3 function czmima(){ 4 document.getElementById("password1").value=""; 5 document.getElementById("password2").value=""; 6 document.getElementById("userName").value=""; 7 } 8 function checkUserName() { 9 var userName = document.getElementById("userName").value; 10 //建立XMLHttpRequest物件 11 var xmlHttp = null; 12 if(window.XMLHttpRequest){ 13 xmlHttp=new XMLHttpRequest(); 14 }else{ 15 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 16 } 17 //XMLHttpRequest物件請求後臺服務 18 xmlHttp.onreadystatechange=function(){ 19 if(xmlHttp.readyState==4&&xmlHttp.status==200){ 20 var dataObject = eval("("+xmlHttp.responseText+")"); 21 if(dataObject.exist){ 22 //如果使用者名稱存在，就會在文字框的後邊顯示一個X的圖示，表示這個使用者名稱稱不可用 23 document.getElementById("img").innerHTML="<img src='no.png'/> 該使用者名稱稱已經存在！"; 24 }else{ 25 //如果使用者名稱存在，就會在文字框的後邊顯示一個“對號”的圖示，表示這個使用者名稱稱可用 26 document.getElementById("img").innerHTML="<img src='ok.png'/> 該使用者名稱稱可以使用！"; 27 } 28 } 29 } 30 //規定請求型別、請求處理的地址以及是否使用非同步請求處理。 31 //這裡還需要把使用者輸入的使用者名稱作為引數傳給後臺servlet用以判斷 32 xmlHttp.open("get","checkUserNameServlet?userName="+userName,true); 33 //將請求傳送給伺服器進行處理 34 xmlHttp.send(); 35 } 36 </script>
3、編寫後臺用於處理前端頁面傳入的userName引數的Servlet：
1 package com.java1234.web; 2 3 import java.io.IOException; 4 import java.io.PrintWriter; 5 6 import javax.servlet.ServletException; 7 import javax.servlet.http.HttpServlet; 8 import javax.servlet.http.HttpServletRequest; 9 import javax.servlet.http.HttpServletResponse; 10 11 import net.sf.json.JSONObject; 12 13 public class CheckUserNameServlet extends HttpServlet { 14 15 /** 16 * 17 */ 18 private static final long serialVersionUID = 1L; 19 20 @Override 21 protected void doGet(HttpServletRequest request, HttpServletResponse response) 22 throws ServletException, IOException { 23 this.doPost(request, response); 24 } 25 26 @Override 27 protected void doPost(HttpServletRequest request, HttpServletResponse response) 28 throws ServletException, IOException { 29 //設定瀏覽器接收到請求是需要知道的處理格式（MIME） 30 response.setContentType("text/html;charset=utf-8"); 31 PrintWriter out = response.getWriter(); 32 //建立一個JSONObject物件，用於封裝處理結果 33 JSONObject reslutJSon = new JSONObject(); 34 //接收從前端傳來的userName的引數 35 String userName = request.getParameter("userName"); 36 //這裡就是直接讓前端傳入的引數和一個字串進行比較 37 if("Marry".equals(userName)) { 38 reslutJSon.put("exist", true); 39 }else { 40 reslutJSon.put("exist", false); 41 } 42 out.println(reslutJSon); 43 out.flush(); 44 out.close(); 45 } 46 47 }
4、配置web.xlml檔案，然後就能執行出結果了，這個需要注意的是，這個因為使用了JSON物件，所以程式執行要保證包含JSON的jar包。
總結：實話講這是一個簡單到極致的功能實現，但對於一個初學者的我來說，我需要從最基礎的知識點抓起，通過一個簡單的例項我能搞清楚Ajax動態實現區域性資料更新的大致過程，不貪多不貪複雜，一步一步來穩穩的走路其實速度並不慢！