基於jQuery實現的Ajax 驗證用戶名惟一性

基於jQuery實現的Ajax 驗證用戶名惟一性

前端jsp頁面代碼 

1 <tr>
2                                     <th><span class="requiredField">*</span>用戶名:</th>
3                                     <td><input type="text" id="username" name="username"
4                                         onblur="checkName()" class="text" maxlength="20"><span
5                                             id="tishi"></span></td>
6                                 </tr>

script 代碼 

 1 <script type="text/javascript">
 2 
 3     function checkName() {
 4         var username = $("#username").val();
 5         //獲取帳號後的提示信息文本
 6         var tishi = document.getElementById("tishi");
 7         $.ajax({
 8             url : "${pageContext.request.contextPath}/user_findByUsername.action", //後臺查詢驗證的方法
 9             data : {
10                 "username" : username
11             }, //攜帶的參數
12             type : "post",
13             success : function(msg) {
14                 //根據後臺返回前臺的msg給提示信息加HTML
15                 if ("true" != msg) {
16                     // 帳號已經存在
17                     tishi.innerHTML = "<font color='red'>抱歉，" + username + "已被註冊，請更換！</font>"
18                 } else {
19                     // 帳號不存在
20                     tishi.innerHTML = "<font color='green'>恭喜，" + username + " 能夠註冊！</font>"
21                 }
22             }
23         });
24 
25     }
26 </script>

其中UserAction中的代碼 

 1 public String findByUsername() throws IOException{
 2         User u=userService.findByUsername(user.getUsername());
 3           String result = "true";
 4           if (u!=null ) {
 5               //說明帳號存在
 6               result = "false";
 7           }
 8           //輸出到界面
 9           HttpServletResponse response = ServletActionContext.getResponse();
10           response.setContentType("text/html");
11           ServletOutputStream outputStream = response.getOutputStream();
12           outputStream.write(result.getBytes());
13           outputStream.close();
14         return NONE;
15     }

Userservice中的代碼 

1 public User findByUsername(String username) {
2         return userDao.findByUsername(username);
3     }

UserDaoImpl中的代碼 

1     public User findByUsername(String username) {
2         List<User> list=(List<User>) this.getHibernateTemplate().find("from User where username=?",username);
3         if(list!=null&&list.size()>0){
4             return list.get(0);
5         }
6         return null;
7     }

便可實現異步刷新