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

http://blog.csdn.net/abing37/archive/2009/12/01/4916751.aspx

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"

         rel="stylesheet" />

<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;

}

</style>

<script src="js/jQuery/jquery-1.3.2.min.js"></script>

<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("");

    }

                  

});

</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>

                            &l

评论

2 楼 henuhaigang 2013-05-28  

[color=darkred]jk[size=x-small]l[/size]jkj[/color][align=center][/

[*]

  align]  

1 楼 tengfeineu 2011-10-12