AJAX学习之序列二：struts2 jquery json 实现AJAX 注册ID验证

1. 目标

目标使用 AJAX 实现如下效果：

当填入用户名的时候，光标移开进行 AJAX 验证，如果已经被注册提示如下：

 

如果可以使用，提示如下：

 

2. 实现过程

准备： jquery ， struts2 ，开发工具等这种环境问题不累述，大家自己准备。

主要工作如下

1. 开发 CheckMemberIdAction:

package com.contentsearch.action;
 
import com.opensymphony.xwork2.ActionSupport;
 
public class CheckMemberIdAction extends ActionSupport {
 
         private String isMemberIdUsed;
 
         private String memberid;
 
         public String getMemberid() {
                   return memberid;
         }
 
         public void setMemberid(String memberid) {
                   this.memberid = memberid;
         }
 
         public String getIsMemberIdUsed() {
                   return isMemberIdUsed;
         }
 
         public void setIsMemberIdUsed(String isMemberIdUsed) {
                   this.isMemberIdUsed = isMemberIdUsed;
         }
        
         // 处理用户请求的 execute 方法
         public String execute() throws Exception {
                   if ("sky".equals(memberid)) {
                            this.setIsMemberIdUsed("yes");
                   } else {
                            this.setIsMemberIdUsed("no");
                   }
                   return SUCCESS;
         }
}

2: 开发 Member Pojo

package com.contentsearch.dao.pojo;
 
public class Member {
         private long id;
         private String memberid;
         private String name;
         private String pass;
         private String email;
         private String gender;
         private String birthday;
 
         public String getMemberid() {
                   return memberid;
         }
 
         public void setMemberid(String memberid) {
                   this.memberid = memberid;
         }
 
         public long getId() {
                   return id;
         }
 
         public void setId(long id) {
                   this.id = id;
         }
 
         public String getName() {
                   return name;
         }
 
         public void setName(String name) {
                   this.name = name;
         }
 
         public String getPass() {
                   return pass;
         }
 
         public void setPass(String pass) {
                   this.pass = pass;
         }
 
         public String getEmail() {
                   return email;
         }
 
         public void setEmail(String email) {
                   this.email = email;
         }
 
         public String getGender() {
                   return gender;
         }
 
         public void setGender(String gender) {
                   this.gender = gender;
         }
 
         public String getBirthday() {
                   return birthday;
         }
 
         public void setBirthday(String birthday) {
                   this.birthday = birthday;
         }
}

3. 配置 Struts.xml

<?xml version="1.0" encoding="GBK"?>
         <!-- 指定 Struts 2 配置文件的 DTD 信息 -->
<!DOCTYPE struts PUBLIC
       "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
       "http://struts.apache.org/dtds/struts-2.0.dtd">
         <!-- struts 是 Struts 2 配置文件的根元素 -->
<struts>
         <!-- Struts 2 的 Action 必须放在指定的包空间下定义 -->
         <package name="strutsqs" extends="struts-default">
                   <!-- 定义 login 的 Action,该 Action 的实现类为 lee.Action 类 -->
                   <action name="Login" class="com.contentsearch.action.LoginAction">
                            <!-- 定义处理结果和资源之间映射关系。 -->
                            <result name="input">/login.jsp</result>
                            <result name="error">/error.jsp</result>
                            <result name="success">/welcome.jsp</result>
                   </action>
                  
         </package>
         <package name="strutsjson" extends="json-default">
                   <action name="CheckMemberId" class="com.contentsearch.action. CheckMemberIdAction" >
                            <result type="json" />
                   </action>
         </package>
         <constant name="struts.objectFactory" value="spring" />
 
</struts>
 

4. 开发 register.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link type="text/css" href="css/jquery-ui-1.7.custom.css" mce_href="css/jquery-ui-1.7.custom.css"
         rel="stylesheet" />
<mce:style type="text/css"><!--
body {
         font: 62.5% "Trebuchet MS", sans-serif;
         margin: 50px;
}
 
.demo {
         align: center;
         border: 1px solid #CA8EFF;
         width: 500px;
         height: 400px;
         padding: 10px;
         float: center;
         background: #E0E0E0;
}
--></mce:style><style type="text/css" mce_bogus="1">body {
         font: 62.5% "Trebuchet MS", sans-serif;
         margin: 50px;
}
 
.demo {
         align: center;
         border: 1px solid #CA8EFF;
         width: 500px;
         height: 400px;
         padding: 10px;
         float: center;
         background: #E0E0E0;
}</style>
<mce:script src="js/jQuery/jquery-1.3.2.min.js" mce_src="js/jQuery/jquery-1.3.2.min.js"></mce:script>
<mce:script type="text/javascript"><!--
$(document).ready(function() {
             ClearErrorInfo();
                   $("#loginSubmit").click(function() {
                     ClearErrorInfo();
                     var flag=true;
                     var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((/.[a-zA-Z0-9_-]{2,3}){1,2})$/;
          if($.trim($("#memberid").val())==""){
              $("#memberIdError").html("<font color='red'>用户名不能为空！</font>");
              flag=false;
                      }
          if($.trim($("#username").val())==""){
              $("#userNameError").html("<font color='red'>姓名不能为空！</font>");
              flag=false;
                      }
          if($.trim($("#memberpass").val())==""){
              $("#passError").html("<font color='red'>密码不能为空！</font>");
              flag=false;
                      }else{
                             if($.trim($("#memberpass").val())!=$.trim($("#memberpass2").val())){
                                 $("#passError2").html("<font color='red'>两次密码不一致！</font>");
                                 flag=false;
                                        }
                      }
                     
          if($.trim($("#gender").val())==""){
              $("#genderError").html("<font color='red'>性别不能为空！</font>");
              flag=false;
                      }
                     var email=$.trim($("#email").val());
          if(email==""){
              $("#emailError").html("<font color='red'>电子邮箱不能为空！</font>");
              flag=false;
                      }else{
                               var isOk=reg.test(email);
               if(!isOk){
                        $("#emailError").html("<font color='red'>电子邮箱格式不正确！</font>");
               }
                      }
          if($.trim($("#birthday").val())==""){
              $("#birthdayError").html("<font color='red'>出生日期不能为空！</font>");
              flag=false;
                      }
                   return flag;
         });    
 
                   $("#memberid").blur(function() {
          $.post("CheckMemberId", { memberid:$("#memberid").val()},
                                    function (data, textStatus){
                                     if(data.isMemberIdUsed=="yes"){
                                              $("#memberIdError").html("<font color='red'>用户名已经被注册，请重新选择一个！</font>");
                                     }
                                    }, "json");
                   });
    function ClearErrorInfo(){
             $("#memberIdError").html("");
             $("#userNameError").html("");
             $("#passError").html("");
             $("#passError2").html("");
             $("#genderError").html("");
             $("#emailError").html("");
             $("#birthdayError").html("");
    }
                  
});
// --></mce:script>
</head>
 
<body>
<div class="demo"><!-- 提交请求参数的表单 --> <s:form action="Register"
         name="userform">
         <table align="center">
                   <caption>
                   <h3>会员注册</h3>
                   </caption>
                   <tr>
                            <!-- 用户名的表单域 -->
                            <td>用户名：</td>
                            <td><input type="text" name="member.memberid" value="" id="memberid"/><span id="memberidError"></span><span id="memberIdError"></span></td>
                   </tr>
                   <tr>
                            <!-- 用户名的表单域 -->
                            <td>真实姓名：</td>
                            <td><input type="text" name="member.name" value="" id="username"/><span id="userNameError"></span></td>
                   </tr>
                   <tr>
                            <!-- 密码的表单域 -->
                            <td>密码：</td>
                            <td><input type="password" name="member.pass" value="" id="memberpass"/><span id="passError"></span></td>
                   </tr>
                   <tr>
                            <!-- 密码的表单域 -->
                            <td>再次密码：</td>
                            <td><input type="password" name="password2" value="" id="memberpass2"/><span id="passError2"></span></td>
                   </tr>
                   <tr>
                            <!-- 性别的表单域 -->
                            <td>性别：</td>
                            <td><input type="radio" name="member.gender" id="gender" value="男生" />男<input type="radio" name="member.gender" id="gender" value="女生" />女<span id="genderError"></span></td>
                   </tr>
                   <tr>
                            <!-- email的表单域 -->
                            <td>E-mail：</td>
                            <td><input type="text" name="member.email" value="" id="email"/><span id="emailError"></span></td>
                   </tr>
                   <tr>
                            <!-- 出生日期 -->
                            <td>出生日期：</td>
                            <td><input type="text" name="member.birthday" value="" id="birthday"/><span id="birthdayError"></span></td>
                   </tr>
                   <tr align="center">
                            <td colspan="2"><input type="submit" id="loginSubmit" value="提交" /><input
                                     type="reset" value="重填" /></td>
                   </tr>
         </table>
</s:form></div>
</body>
</html>

如上红色标出的为实现了 AJAX 效果的 jquery 代码。

3. 后记

使用 jquery 实现 ajax 还是比较简单的。本身是一个非常轻量的框架。使用方便，扩张性好，非常推荐使用。

同时 struts2 对于 ajax 的支持还是比较好的，通过这种 json 的方式很方便的把 bean 的数据以 json 格式传递给客户端。