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 格式传递给客户端。