web开发中我们常常要保证用户在注册时要使用不同的用户名,此时在注册表单中就要用Ajax完成用户名异步校验,以下是相关代码。本实例用的是SSH框架,请多指教。
要在用户名的input域添加onblur事件,本例中是οnblur=”checkUsername()”
注册form表单:
<form action="${ pageContext.request.contextPath }/user_regist.action" method="post" novalidate="novalidate" onsubmit="return checkForm();">
<!--用户名-->
<input type="text" id="username" name="username" class="text" maxlength="20" onblur="checkUsername()"/>
<span id="span1"></span>
<input type="submit" class="submit" value="注册">
</form>
js和Ajax脚本,含密码校验:
校验时将请求发送到后台Struts的user_findByName.action,并加了时间戳防止浏览器缓存。
<script>
function checkForm(){
// 校验用户名:
// 获得用户名文本框的值:
var username = document.getElementById("username").value;
if(username == null || username == ''){
alert("用户名不能为空!");
return false;
}
// 校验密码:
// 获得密码框的值:
var password = document.getElementById("password").value;
if(password == null || password == ''){
alert("密码不能为空!");
return false;
}
// 校验确认密码:
var repassword = document.getElementById("repassword").value;
if(repassword != password){
alert("两次密码输入不一致!");
return false;
}
}
function checkUsername(){
// 获得文件框值:
var username = document.getElementById("username").value;
// 1.创建异步交互对象
var xhr = createXmlHttp();
// 2.设置监听
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
//将校验信息写回到用户名的input域后面 document.getElementById("span1").innerHTML = xhr.responseText;
}
}
}
// 3.打开连接,加上时间戳,防止浏览器缓存new Date().getTime()
xhr.open("GET","${pageContext.request.contextPath}/user_findByName.action?time="+new Date().getTime()+"&username="+username,true);
// 4.发送
xhr.send(null);
}
function createXmlHttp(){
var xmlHttp;
try{ // Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e){
try{// Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){}
}
}
return xmlHttp;
}
</script>
DAO代码:
public class UserDao extends HibernateDaoSupport {
// 按名次查询是否有该用户:
public User findByUsername(String username) {
String hql = "from User where username = ?";
List<User> list = this.getHibernateTemplate().find(hql, username);
if (list != null && list.size() > 0) {
return list.get(0);
}
return null;
}
}
service代码:
@Transactional
public class UserService {
// 按用户名查询用户的方法:
public User findByUsername(String username){
return userDao.findByUsername(username);
}
}
action负责调用service中的方法根据用户名去数据库查找相应的对象,若能找到说明该用户名已经被注册过,不能再使用,若找不到说明该用户名未被注册,可以使用。使用response将信息返回到前台。
action代码:
public class UserAction extends ActionSupport implements ModelDriven<User> {
// 模型驱动使用的对象
private User user = new User();
public User getModel() {
return user;
}
/**
* AJAX进行异步校验用户名的执行方法
*
* @throws IOException
*/
public String findByName() throws IOException {
// 调用Service进行查询:
User existUser = userService.findByUsername(user.getUsername());
// 获得response对象,项页面输出:
HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType("text/html;charset=UTF-8");
// 判断
if (existUser != null) {
// 查询到该用户:用户名已经存在
response.getWriter().println("<font color='red'>用户名已经存在</font>");
} else {
// 没查询到该用户:用户名可以使用
response.getWriter().println("<font color='green'>用户名可以使用</font>");
}
return NONE;
}
}
实体类User:
/**
* 用户名模块实体类:
* @author zhk
*CREATE TABLE `user` (
`uid` int(11) NOT NULL AUTO_INCREMENT,
`username` varchar(255) DEFAULT NULL,
`password` varchar(255) DEFAULT NULL,
`name` varchar(255) DEFAULT NULL,
`email` varchar(255) DEFAULT NULL,
`phone` varchar(255) DEFAULT NULL,
`addr` varchar(255) DEFAULT NULL,
`state` int(11) DEFAULT NULL,
`code` varchar(64) DEFAULT NULL,
PRIMARY KEY (`uid`)
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8;
*/
public class User {
private Integer uid;
private String username;
private String password;
private String name;
private String email;
private String phone;
private String addr;
private Integer state;
private String code;
// 一个用户对应多个订单:
private Set<Order> orders = new HashSet<Order>();
public Integer getUid() {
return uid;
}
public void setUid(Integer uid) {
this.uid = uid;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public String getPhone() {
return phone;
}
public void setPhone(String phone) {
this.phone = phone;
}
public String getAddr() {
return addr;
}
public void setAddr(String addr) {
this.addr = addr;
}
public Integer getState() {
return state;
}
public void setState(Integer state) {
this.state = state;
}
public String getCode() {
return code;
}
public void setCode(String code) {
this.code = code;
}
public Set<Order> getOrders() {
return orders;
}
public void setOrders(Set<Order> orders) {
this.orders = orders;
}
}
实体类的映射:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE hibernate-mapping PUBLIC
"-//Hibernate/Hibernate Mapping DTD 3.0//EN"
"http://www.hibernate.org/dtd/hibernate-mapping-3.0.dtd">
<hibernate-mapping>
<class name="cn.edu.imau.shop.user.vo.User" table="user">
<id name="uid">
<generator class="native"/>
</id>
<property name="username"/>
<property name="password"/>
<property name="name"/>
<property name="email"/>
<property name="phone"/>
<property name="addr"/>
<property name="state"/>
<property name="code"/>
<set name="orders" cascade="delete">
<key column="uid"/>
<one-to-many class="cn.edu.imau.order.vo.Order"/>
</set>
</class>
</hibernate-mapping>
到此就完成了使用Ajax对用户名的异步校验。敬请指正。