jquery ajax验证用户名是否存在（后台spring mvc）

点击打开链接

controller层

[java]  view plain copy

1. @ResponseBody  
2. @RequestMapping(value = "/user/isExist", produces = "application/json")   
3. public boolean isExist(Model model,String userName) {  
4.       
5.     boolean flag = userPrivilegeServiceFacade  
6.             .isExistUserName(userName);  
7.     if(flag) {  
8.         return true;  
9.     }  
10.     return false;  
11. }  

jsp页面

[html]  view plain copy

1. <form:form class="form-horizontal" id="form" method="post" modelAttribute="user"   
2.          enctype="multipart/form-data" >  
3.          <div class="control-group">  
4.             <form:label path="userName" class="control-label">  
5.                 <spring:message code="system.user.userName" />  
6.             </form:label>  
7.             <div class="controls">  
8.                 <form:input path="userName" onblur="checkIsExist();" onfocus="clearCss();" />  
9.                 <site:required />  
10.                 <span id="showResult"></span>  
11.                 <form-extension:errors path="userName" cssClass="error" />  
12.             </div>  
13.         </div>  

</form:form>

[html]  view plain copy

1. <script type="text/javascript">  
2.     function checkIsExist() {  
3.         var userName = $.trim($("#userName").val());  
4.         $.ajax({  
5.             type:"POST",   //http请求方式  
6.             url:"<spring:url value="/system/userprivilege/user/isExist" />", //发送给服务器的url  
7.             data:"userName="+userName, //发送给服务器的参数  
8.             dataType:"json",  //告诉JQUERY返回的数据格式(注意此处数据格式一定要与提交的controller返回的数据格式一致,不然不会调用回调函数complete)  
9.             complete:function(msg) {  
10.                 if (eval("(" + msg.responseText + ")")) {  
11.                     $("#showResult").html("<font color='red'>用户名已存在</font>");  
12.                 } else {  
13.                     $("#showResult").html("");  
14.                 }  
15.             }//定义交互完成,并且服务器正确返回数据时调用回调函数   
16.         });  
17.     }  
18.    function clearCss() {  
19.        $("#showResult").html("");    
20.    }      
21. </script>  

错误的例子（controller层）

[java]  view plain copy

1. @ResponseBody  
2. @RequestMapping(value = "/user/isExist", produces = "application/json")   
3. public boolean isExist(Model model,String userName) {  
4.       
5.     boolean flag = userPrivilegeServiceFacade  
6.              .isExistUserName(userName);  
7.           
8.     return flag;  
9. }  

优化的例子

controller层

[java]  view plain copy

1. @ResponseBody  
2. @RequestMapping(value = "/user/isExist", produces = "application/json")   
3. public ResultDTO isExist(Model model,String userName) {  
4.           
5.     ResultDTO result = new ResultDTO();  
6.            
7.     boolean success = userPrivilegeServiceFacade  
8.                  .isExistUserName(userName);  
9.           
10.     result.setSuccess(success);  
11.           
12.     if(success) {  
13.         result.setMessage("<font color='red'>用户名已存在</font>");  
14.     } else {  
15.         result.setMessage("<font color='green'>用户名合法</font>");  
16.     }  
17.     return result;  
18. }  

domain层

[java]  view plain copy

1. public class ResultDTO implements Serializable{  
2.     private static final long serialVersionUID = 1L;  
3.       
4.     private  boolean success;  
5.     private  String message;  
6.     public boolean isSuccess() {  
7.         return success;  
8.     }  
9.     public void setSuccess(boolean success) {  
10.         this.success = success;  
11.     }  
12.     public String getMessage() {  
13.         return message;  
14.     }  
15.     public void setMessage(String message) {  
16.         this.message = message;  
17.     }  
18.   
19. }  

jsp页面

[html]  view plain copy

1. <script type="text/javascript">  
2.   
3.     function checkIsExist() {  
4.         var userName = $.trim($("#userName").val());  
5.         $.ajax({  
6.             type:"POST",   //http请求方式  
7.             url:"<spring:url value="/system/userprivilege/user/isExist" />", //发送给服务器的url  
8.             data:"userName="+userName, //发送给服务器的参数  
9.             dataType:"json",  //告诉JQUERY返回的数据格式(注意此处数据格式一定要与提交的controller返回的数据格式一致,不然不会调用回调函数complete)  
10.             complete : function(msg) {  
11.               var result = eval("(" + msg.responseText + ")");  
12.               if(result.success) {  
13.                   $("#showResult").html(result.message);  
14.                 } else {  
15.                     $("#showResult").html(result.message);  
16.                 }   
17.            }   
18.         });  
19.     }  
20.    function clearCss() {  
21.        $("#showResult").html("");    
22.    }      
23. </script>