<%@ page pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head><meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>使用jQuery验证用户名是否存在，达到局部刷新的效果</title>
<script src="${basePath}/js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
//聚焦时触发的事件
$("#loginname").focus(function(){
$("#msg").html("");
});
//点击按钮时触发事件
$("#checkLoginname").click(function(){
var loginname=$("#loginname").val().replace(/\s/g,'');//去除头尾空格
if(loginname==''){
$("#msg").html("用户名不能为空!");
$("#loginname").val("");
return false;
}
if(loginname.length>20){
$("#msg").html("用户名超过长度!");
return false;
}
//使用jQuery提交，回调函数function(data)里返回相应信息:data
$.post("${basePath}/checkloginname.htm?d="+new Date().getTime(), {"member.loginname":loginname}, function(data){
$("#msg").html(data);
});
return false;
});
});
</script>
</head>
<body>
<form method="post" action="${basePath}/registe.htm" id="registeForm" class="validateForm">
<tr>
<td width="30%" align="right">用户名：</td>
<td width="70%"> <input type="text" name="member.loginname" id="loginname" class="input" />
<input type="button" value="检查用户名是否可用" class="btn" id="checkLoginname"/> <span id="msg" style="color:red"></span></td>
</tr>
</form>
</body>
</html>
后台action代码：
MemberAction.java
/**
* ClassName: MemberAction.java*/
package com.tjitcast.bbs.web.action.front;
import org.apache.struts2.convention.annotation.Action;
import org.apache.struts2.convention.annotation.Namespace;
import org.apache.struts2.convention.annotation.ParentPackage;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Controller;
import com.tjitcast.bbs.domain.Member; /**
* 检查会员是否存在的Action类
*
* @author yjd
*/
@Controller("front.memberAction")
@Scope("prototype")
@Namespace("/")
@ParentPackage("struts-default")
public class MemberAction extends BaseAction {
private static final long serialVersionUID = -4631080996625964833L;
private Member member;
/**
* 检查用户名是否已经存在
*/
@Action(value = "checkloginname")
public void checkLoginname() {
Member temp = memberService.get(member.getLoginname());
if (temp != null) {
renderText("用户名已存在，请更换！");
} else {
renderText("恭喜你，这个用户名可用!");
}
}
public void renderText(String text) {
HttpServletResponse response = getResponse();
response.setContentType("text/plain;charset=UTF-8");
try {
response.getWriter().write(text);
response.getWriter().flush();
} catch (IOException e) {
throw new IllegalArgumentException(e); // 把受检异常转换为非受检异常
}
}
public Member getMember() {
return member;
} public void setMember(Member member) {
this.member = member;
}
}
效果如下图：