1.目标
目标使用AJAX实现如下效果：
当填入用户名的时候，光标移开进行AJAX验证，如果已经被注册提示如下：
如果可以使用，提示如下：
2.实现过程
准备：jquery，struts2，开发工具等这种环境问题不累述，大家自己准备。
主要工作如下
1.开发CheckMemberIdAction:
[java]
view plain
copy
- packagecom.contentsearch.action;@H_502_41@
- @H_502_41@
- importcom.opensymphony.xwork2.ActionSupport;@H_502_41@
- @H_502_41@
- publicclassCheckMemberIdActionextendsActionSupport{@H_502_41@
- @H_502_41@
- privateStringisMemberIdUsed;@H_502_41@
- @H_502_41@
- privateStringmemberid;@H_502_41@
- @H_502_41@
- publicStringgetMemberid(){@H_502_41@
- returnmemberid;@H_502_41@
- }@H_502_41@
- @H_502_41@
- voidsetMemberid(Stringmemberid){@H_502_41@
- this.memberid=memberid;@H_502_41@
- }@H_502_41@
- @H_502_41@
- publicStringgetIsMemberIdUsed(){@H_502_41@
- returnisMemberIdUsed;@H_502_41@
- }@H_502_41@
- @H_502_41@
- voidsetIsMemberIdUsed(StringisMemberIdUsed){@H_502_41@
- this.isMemberIdUsed=isMemberIdUsed;@H_502_41@
- }@H_502_41@
- @H_502_41@
- //处理用户请求的execute方法@H_502_41@
- publicStringexecute()throwsException{@H_502_41@
- if("sky".equals(memberid)){@H_502_41@
- this.setIsMemberIdUsed("yes");@H_502_41@
- }else{@H_502_41@
- this.setIsMemberIdUsed("no");@H_502_41@
- }@H_502_41@
- returnSUCCESS;@H_502_41@
- }@H_502_41@
- }@H_502_41@
2:开发Member Pojo
[java]
packagecom.contentsearch.dao.pojo;@H_502_41@
@H_502_41@
classMember{@H_502_41@
privatelongid;@H_502_41@
privateStringmemberid;@H_502_41@
privateStringname;@H_502_41@
privateStringpass;@H_502_41@
privateStringemail;@H_502_41@
privateStringgender;@H_502_41@
privateStringbirthday;@H_502_41@
@H_502_41@
publicStringgetMemberid(){@H_502_41@
returnmemberid;@H_502_41@
}@H_502_41@
@H_502_41@
voidsetMemberid(Stringmemberid){@H_502_41@
this.memberid=memberid;@H_502_41@
}@H_502_41@
@H_502_41@
longgetId(){@H_502_41@
returnid;@H_502_41@
}@H_502_41@
@H_502_41@
voidsetId(longid){@H_502_41@
this.id=id;@H_502_41@
}@H_502_41@
@H_502_41@
publicStringgetName(){@H_502_41@
returnname;@H_502_41@
}@H_502_41@
@H_502_41@
voidsetName(Stringname){@H_502_41@
this.name=name;@H_502_41@
}@H_502_41@
@H_502_41@
publicStringgetPass(){@H_502_41@
returnpass;@H_502_41@
}@H_502_41@
@H_502_41@
voidsetPass(Stringpass){@H_502_41@
this.pass=pass;@H_502_41@
}@H_502_41@
@H_502_41@
publicStringgetEmail(){@H_502_41@
returnemail;@H_502_41@
}@H_502_41@
@H_502_41@
voidsetEmail(Stringemail){@H_502_41@
this.email=email;@H_502_41@
}@H_502_41@
@H_502_41@
publicStringgetGender(){@H_502_41@
returngender;@H_502_41@
}@H_502_41@
@H_502_41@
voidsetGender(Stringgender){@H_502_41@
this.gender=gender;@H_502_41@
}@H_502_41@
@H_502_41@
publicStringgetBirthday(){@H_502_41@
returnbirthday;@H_502_41@
}@H_502_41@
@H_502_41@
voidsetBirthday(Stringbirthday){@H_502_41@
this.birthday=birthday;@H_502_41@
}@H_502_41@
}@H_502_41@
3.配置Struts.xml
[xhtml]
<?xmlversion="1.0"encoding="GBK"?>@H_502_41@
<!--指定Struts2配置文件的DTD信息-->@H_502_41@
<!DOCTYPEstrutsPUBLIC@H_502_41@
"-//ApacheSoftwareFoundation//DTDStrutsConfiguration2.0//EN"@H_502_41@
"http://struts.apache.org/dtds/struts-2.0.dtd">@H_502_41@
<!--struts是Struts2配置文件的根元素-->@H_502_41@
<struts<!--Struts2的Action必须放在指定的包空间下定义-->@H_502_41@
packagename="strutsqs"extends="struts-default">@H_502_41@
<!--定义login的Action,该Action的实现类为lee.Action类-->@H_502_41@
actionname="Login"class="com.contentsearch.action.LoginAction"<!--定义处理结果和资源之间映射关系。-->@H_502_41@
resultname="input">/login.jsp</result>@H_502_41@
resultname="error">/error.jsp>@H_502_41@
resultname="success">/welcome.jspaction>@H_502_41@
@H_502_41@
package>@H_502_41@
packagename="strutsjson"extends="json-default"actionname="CheckMemberId"class="com.contentsearch.action.CheckMemberIdAction"resulttype="json"/>@H_502_41@
>@H_502_41@
constantname="struts.objectFactory"value="spring"/>@H_502_41@
@H_502_41@
>@H_502_41@
@H_502_41@
4.开发register.jsp
[xhtml]
<%@pagelanguage="java"contentType="text/html;charset=UTF-8"@H_502_41@
pageEncoding="UTF-8"%<%@taglibprefix="s"uri="/struts-tags"%>@H_502_41@
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"htmlheadMetahttp-equiv="Content-Type"content="text/html;charset=UTF-8"title>Inserttitleherelinktype="text/css"href="css/jquery-ui-1.7.custom.css"mce_href="css/jquery-ui-1.7.custom.css"@H_502_41@
rel="stylesheet"/>@H_502_41@
mce:styletype="text/css"><!--@H_502_41@
body{@H_502_41@
font:62.5%"TrebuchetMS",sans-serif;@H_502_41@
margin:50px;@H_502_41@
}@H_502_41@
@H_502_41@
.demo{@H_502_41@
align:center;@H_502_41@
border:1pxsolid#CA8EFF;@H_502_41@
width:500px;@H_502_41@
height:400px;@H_502_41@
padding:10px;@H_502_41@
float:center;@H_502_41@
background:#E0E0E0;@H_502_41@
}@H_502_41@
-->mce:stylestyletype="text/css"mce_bogus="1">body{@H_502_41@
font:62.5%"TrebuchetMS",sans-serif;@H_502_41@
margin:50px;@H_502_41@
}@H_502_41@
@H_502_41@
.demo{@H_502_41@
align:center;@H_502_41@
border:1pxsolid#CA8EFF;@H_502_41@
width:500px;@H_502_41@
height:400px;@H_502_41@
padding:10px;@H_502_41@
float:center;@H_502_41@
background:#E0E0E0;@H_502_41@
}stylemce:scriptsrc="js/jQuery/jquery-1.3.2.min.js"mce_src="js/jQuery/jquery-1.3.2.min.js"mce:scriptmce:scripttype="text/javascript"><!--@H_502_41@
$(document).ready(function(){@H_502_41@
ClearErrorInfo();@H_502_41@
$("#loginSubmit").click(function(){@H_502_41@
ClearErrorInfo();@H_502_41@
varflag=true;@H_502_41@
varreg=/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((/.[a-zA-Z0-9_-]{2,3}){1,2})$/;@H_502_41@
if($.trim($("#memberid").val())==""){@H_502_41@
$("#memberIdError").html("fontcolor='red'>用户名不能为空！font>");@H_502_41@
flag=false;@H_502_41@
}@H_502_41@
if($.trim($("#username").val())==""){@H_502_41@
$("#userNameError").html(">姓名不能为空！>");@H_502_41@
flag=false;@H_502_41@
}@H_502_41@
if($.trim($("#memberpass").val())==""){@H_502_41@
$("#passError").html(">密码不能为空！>");@H_502_41@
flag=false;@H_502_41@
}else{@H_502_41@
if($.trim($("#memberpass").val())!=$.trim($("#memberpass2").val())){@H_502_41@
$("#passError2").html(">两次密码不一致！>");@H_502_41@
flag=false;@H_502_41@
}@H_502_41@
}@H_502_41@
@H_502_41@
if($.trim($("#gender").val())==""){@H_502_41@
$("#genderError").html(">性别不能为空！>");@H_502_41@
flag=false;@H_502_41@
}@H_502_41@
varemail=$.trim($("#email").val());@H_502_41@
if(email==""){@H_502_41@
$("#emailError").html(">电子邮箱不能为空！>");@H_502_41@
flag=false;@H_502_41@
}else{@H_502_41@
varisOk=reg.test(email);@H_502_41@
if(!isOk){@H_502_41@
$("#emailError").html(">电子邮箱格式不正确！>");@H_502_41@
}@H_502_41@
}@H_502_41@
if($.trim($("#birthday").val())==""){@H_502_41@
$("#birthdayError").html(">出生日期不能为空！>");@H_502_41@
flag=false;@H_502_41@
}@H_502_41@
returnflag;@H_502_41@
});@H_502_41@
@H_502_41@
$("#memberid").blur(function(){@H_502_41@
$.post("CheckMemberId",{memberid:$("#memberid").val()},@H_502_41@
function(data,textStatus){@H_502_41@
if(data.isMemberIdUsed=="yes"){@H_502_41@
$("#memberIdError").html(">用户名已经被注册，请重新选择一个！>");@H_502_41@
}@H_502_41@
},"json");@H_502_41@
});@H_502_41@
functionClearErrorInfo(){@H_502_41@
$("#memberIdError").html("");@H_502_41@
$("#userNameError").html("");@H_502_41@
$("#passError").html("");@H_502_41@
$("#passError2").html("");@H_502_41@
$("#genderError").html("");@H_502_41@
$("#emailError").html("");@H_502_41@
$("#birthdayError").html("");@H_502_41@
}@H_502_41@
@H_502_41@
});@H_502_41@
//-->@H_502_41@
@H_502_41@
bodydivclass="demo"><!--提交请求参数的表单-->s:formaction="Register"@H_502_41@
name="userform"table align="center"captionh3>会员注册 tr> @H_502_41@
<!--用户名的表单域-->@H_502_41@
td>用户名：input type="text"name="member.memberid"value=""id="memberid"/>spanid="memberidError"spanspanid="memberIdError"<!--用户名的表单域--> @H_502_41@
>真实姓名：input type="text"name="member.name"value=""id="username"spanid="userNameError"<!--密码的表单域--> @H_502_41@
>密码：input type="password"name="member.pass"value=""id="memberpass"spanid="passError"<!--密码的表单域-->@H_502_41@
>再次密码：inputtype="password"name="password2"value=""id="memberpass2"spanid="passError2"<!--性别的表单域-->@H_502_41@
>性别：inputtype="radio"name="member.gender"id="gender"value="男生"/>男inputtype="radio"name="member.gender"id="gender"value="女生"/>女spanid="genderError"<!--email的表单域-->@H_502_41@
>E-mail：inputtype="text"name="member.email"value=""id="email"spanid="emailError"<!--出生日期-->@H_502_41@
>出生日期：inputtype="text"name="member.birthday"value=""id="birthday"spanid="birthdayError"tralign="center"tdcolspan="2"inputtype="submit"id="loginSubmit"value="提交"input@H_502_41@
type="reset"value="重填"tables:formdiv>@H_502_41@
3.后记
使用jquery实现ajax还是比较简单的。本身是一个非常轻量的框架。使用方便，扩张性好，非常推荐使用。
同时struts2对于ajax的支持还是比较好的，通过这种json的方式很方便的把bean的数据以json格式传递给客户端。
