先上效果图,用户名输入完鼠标失去文本框焦点触发事件,这里以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();
}