jquery ajax验证用户名是否存在(后台spring mvc)
controller层
@ResponseBody @RequestMapping(value = "/user/isExist", produces = "application/json") public boolean isExist(Model model,String userName) { boolean flag = userPrivilegeServiceFacade .isExistUserName(userName); if(flag) { return true; } return false; }
jsp页面
<form:form class="form-horizontal" id="form" method="post" modelAttribute="user" enctype="multipart/form-data" > <div class="control-group"> <form:label path="userName" class="control-label"> <spring:message code="system.user.userName" /> </form:label> <div class="controls"> <form:input path="userName" onblur="checkIsExist();" onfocus="clearCss();" /> <site:required /> <span id="showResult"></span> <form-extension:errors path="userName" cssClass="error" /> </div> </div> </form:form>
<script type="text/javascript"> function checkIsExist() { var userName = $.trim($("#userName").val()); $.ajax({ type:"POST", //http请求方式 url:"<spring:url value="/system/userprivilege/user/isExist" />", //发送给服务器的url data:"userName="+userName, //发送给服务器的参数 dataType:"json", //告诉JQUERY返回的数据格式(注意此处数据格式一定要与提交的controller返回的数据格式一致,不然不会调用回调函数complete) complete:function(msg) { if (eval("(" + msg.responseText + ")")) { $("#showResult").html("<font color='red'>用户名已存在</font>"); } else { $("#showResult").html(""); } }//定义交互完成,并且服务器正确返回数据时调用回调函数 }); } function clearCss() { $("#showResult").html(""); } </script>
错误的例子(controller层)
@ResponseBody @RequestMapping(value = "/user/isExist", produces = "application/json") public boolean isExist(Model model,String userName) { boolean flag = userPrivilegeServiceFacade .isExistUserName(userName); return flag; }
优化的例子
controller层
@ResponseBody @RequestMapping(value = "/user/isExist", produces = "application/json") public ResultDTO isExist(Model model,String userName) { ResultDTO result = new ResultDTO(); boolean success = userPrivilegeServiceFacade .isExistUserName(userName); result.setSuccess(success); if(success) { result.setMessage("<font color='red'>用户名已存在</font>"); } else { result.setMessage("<font color='green'>用户名合法</font>"); } return result; }
domain层
public class ResultDTO implements Serializable{ private static final long serialVersionUID = 1L; private boolean success; private String message; public boolean isSuccess() { return success; } public void setSuccess(boolean success) { this.success = success; } public String getMessage() { return message; } public void setMessage(String message) { this.message = message; } }
jsp页面
<script type="text/javascript"> function checkIsExist() { var userName = $.trim($("#userName").val()); $.ajax({ type:"POST", //http请求方式 url:"<spring:url value="/system/userprivilege/user/isExist" />", //发送给服务器的url data:"userName="+userName, //发送给服务器的参数 dataType:"json", //告诉JQUERY返回的数据格式(注意此处数据格式一定要与提交的controller返回的数据格式一致,不然不会调用回调函数complete) complete : function(msg) { var result = eval("(" + msg.responseText + ")"); if(result.success) { $("#showResult").html(result.message); } else { $("#showResult").html(result.message); } } }); } function clearCss() { $("#showResult").html(""); } </script>