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