ajax实现用户名是否重复异步校验

先上效果图,用户名输入完鼠标失去文本框焦点触发事件，这里以SSH项目为例。

register.jsp

<div class="register-box">
	<label for="username" class="username_label"> 
	用 户 名 
	<input id="username" maxlength="20" name="username" type="text" placeholder="您的用户名和登录名" />
	</label>
	<div id="usernameInfo" class="tips"></div>
</div>

为提示框div设置id，在函数中用id选择器选择。

<script type="text/javascript">
	$(function()
	{
		$("#username").blur(function(){
			var usernameInput = $(this).val();
			//alert(usernameInput);
			$.post(
				//action的地址
				"${pageContext.request.contextPath}/UserAction_checkUsername",
				//提交的数据
				{"username":usernameInput},
				//回调函数，如果成功了应该怎么办
				function(data)
				{
					var success = data.success;
					//用户名可以使用
					if(success){
						$("#usernameInfo").css("color","green");
						$("#usernameInfo").html("用户名可以使用!");
					}
					//用户名重复
					else{
						$("#usernameInfo").css("color","red");
						$("#usernameInfo").html("用户名重复!!");
					}
					//alert(data.success);
				},
				//数据的格式
				"json"
			)
		})
	})

</script>

UserAction.java

//校验用户名是否存在
	public String checkUsername() throws Exception {
		
		boolean success = userService.findUserByUsername(user.getUsername());
		//传递json格式字符串
		ServletActionContext.getResponse().getWriter().write("{\"success\":"+success+"}");
		
		return null;
	}

UserService.java

//校验用户名
	public boolean findUserByUsername(String username) {
		Long count = userDao.findUserByUsernameReturnNum(username);
		return count==0?true:false;
	}

UserDao.java

//检查用户名是否重复
	public Long findUserByUsernameReturnNum(String username) {
		Session session = getHibernateTemplate().getSessionFactory().getCurrentSession();
		String sql = "select count(*) from user where username = ?";
		NativeQuery query = session.createSQLQuery(sql);
		query.setParameter(1, username);
		BigInteger result = (BigInteger) query.uniqueResult();
		return result.longValue();
	}