1. 目标
目标使用 AJAX 实现如下效果：
当填入用户名的时候，光标移开进行 AJAX 验证，如果已经被注册提示如下：
如果可以使用，提示如下：
2. 实现过程
准备： jquery ， struts2 ，开发工具等这种环境问题不累述，大家自己准备。
主要工作如下
1. 开发 CheckMemberIdAction:
[java] view plain copy
1. package
2.
3. import
4.
5. publicclass CheckMemberIdAction extends
6.
7. private
8.
9. private
10.
11. public
12. return
13. }
14.
15. publicvoid
16. this.memberid = memberid;
17. }
18.
19. public
20. return
21. }
22.
23. publicvoid
24. this.isMemberIdUsed = isMemberIdUsed;
25. }
26.
27. // 处理用户请求的 execute 方法
28. publicthrows
29. if"sky".equals(memberid)) {
30. this.setIsMemberIdUsed("yes");
31. else
32. this.setIsMemberIdUsed("no");
33. }
34. return
35. }
36. }2: 开发 Member Pojo
[java] view plain copy
1. package
2.
3. publicclass
4. privatelong
5. private
6. private
7. private
8. private
9. private
10. private
11.
12. public
13. return
14. }
15.
16. publicvoid
17. this.memberid = memberid;
18. }
19.
20. publiclong
21. return
22. }
23.
24. publicvoid setId(long
25. this.id = id;
26. }
27.
28. public
29. return
30. }
31.
32. publicvoid
33. this.name = name;
34. }
35.
36. public
37. return
38. }
39.
40. publicvoid
41. this.pass = pass;
42. }
43.
44. public
45. return
46. }
47.
48. publicvoid
49. this.email = email;
50. }
51.
52. public
53. return
54. }
55.
56. publicvoid
57. this.gender = gender;
58. }
59.
60. public
61. return
62. }
63.
64. publicvoid
65. this.birthday = birthday;
66. }
67. }3. 配置 Struts.xml
[xhtml] view plain copy
1. <?xmlversion="1.0" encoding="GBK"?>
2. <!-- 指定 Struts 2 配置文件的 DTD 信息 -->
3. <!DOCTYPE struts PUBLIC
4. "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
5. >
6. <!-- struts 是 Struts 2 配置文件的根元素 -->
7. <struts>
8. <!-- Struts 2 的 Action 必须放在指定的包空间下定义 -->
9. <packagename="strutsqs" extends="struts-default">
10. <!-- 定义 login 的 Action,该 Action 的实现类为 lee.Action 类 -->
11. <actionname="Login" class="com.contentsearch.action.LoginAction">
12. <!-- 定义处理结果和资源之间映射关系。 -->
13. <resultname="input">/login.jsp</result>
14. <resultname="error">/error.jsp</result>
15. <resultname="success">/welcome.jsp</result>
16. </action>
17.
18. </package>
19. <packagename="strutsjson" extends="json-default">
20. <actionname="CheckMemberId" class="com.contentsearch.action. CheckMemberIdAction" >
21. <resulttype="json" />
22. </action>
23. </package>
24. <constantname="struts.objectFactory" value="spring" />
25.
26. </struts>
27.
4. 开发 register.jsp
[xhtml] view plain copy
1. <%@ page language="java" contentType="text/html; charset=UTF-8"
2. pageEncoding="UTF-8"%>
3. <%@taglib prefix="s" uri="/struts-tags"%>
4. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
5. <html>
6. <head>
7. <metahttp-equiv="Content-Type" content="text/html; charset=UTF-8">
8. <title>Insert title here</title>
9. <linktype="text/css" href="css/jquery-ui-1.7.custom.css" mce_href="css/jquery-ui-1.7.custom.css"
10. rel="stylesheet" />
11. <mce:styletype="text/css"><!--
12. body {
13. font: 62.5% "Trebuchet MS", sans-serif;
14. margin: 50px;
15. }
16.
17. .demo {
18. align: center;
19. border: 1px solid #CA8EFF;
20. width: 500px;
21. height: 400px;
22. padding: 10px;
23. float: center;
24. background: #E0E0E0;
25. }
26. --></mce:style><styletype="text/css" mce_bogus="1">body {
27. font: 62.5% "Trebuchet MS", sans-serif;
28. margin: 50px;
29. }
30.
31. .demo {
32. align: center;
33. border: 1px solid #CA8EFF;
34. width: 500px;
35. height: 400px;
36. padding: 10px;
37. float: center;
38. background: #E0E0E0;
39. }</style>
40. <mce:scriptsrc="js/jQuery/jquery-1.3.2.min.js" mce_src="js/jQuery/jquery-1.3.2.min.js"></mce:script>
41. <mce:scripttype="text/javascript"><!--
42. $(document).ready(function() {
43. ClearErrorInfo();
44. $("#loginSubmit").click(function() {
45. ClearErrorInfo();
46. flag=true;
47. reg
48. if($.trim($("#memberid").val())==""){
49. <fontcolor='red'>用户名不能为空！</font>");
50. flag=false;
51. }
52. if($.trim($("#username").val())==""){
53. <fontcolor='red'>姓名不能为空！</font>");
54. flag=false;
55. }
56. if($.trim($("#memberpass").val())==""){
57. <fontcolor='red'>密码不能为空！</font>");
58. flag=false;
59. }else{
60. if($.trim($("#memberpass").val())!=$.trim($("#memberpass2").val())){
61. <fontcolor='red'>两次密码不一致！</font>");
62. flag=false;
63. }
64. }
65.
66. if($.trim($("#gender").val())==""){
67. <fontcolor='red'>性别不能为空！</font>");
68. flag=false;
69. }
70. email=$.trim($("#email").val());
71. email==""){
72. <fontcolor='red'>电子邮箱不能为空！</font>");
73. flag=false;
74. }else{
75. isOk=reg.test(email);
76. if(!isOk){
77. <fontcolor='red'>电子邮箱格式不正确！</font>");
78. }
79. }
80. if($.trim($("#birthday").val())==""){
81. <fontcolor='red'>出生日期不能为空！</font>");
82. flag=false;
83. }
84. return flag;
85. });
86.
87. $("#memberid").blur(function() {
88. $.post("CheckMemberId", { memberid:$("#memberid").val()},
89. function (data, textStatus){
90. data.isMemberIdUsed=="yes"){
91. <fontcolor='red'>用户名已经被注册，请重新选择一个！</font>");
92. }
93. }, "json");
94. });
95. function ClearErrorInfo(){
96. $("#memberIdError").html("");
97. $("#userNameError").html("");
98. $("#passError").html("");
99. $("#passError2").html("");
100. $("#genderError").html("");
101. $("#emailError").html("");
102. $("#birthdayError").html("");
103. }
104.
105. });
106. // --></mce:script>
107. </head>
108.
109. <body>
110. <divclass="demo"><!-- 提交请求参数的表单 --> <s:form action="Register"
111. name="userform">
112. <tablealign="center">
113. <caption>
114. <h3>会员注册</h3>
115. </caption>
116. <tr>
117. <!-- 用户名的表单域 -->
118. <td>用户名：</td>
119. <td><inputtype="text" name="member.memberid" value="" id="memberid"/><span id="memberidError"></span><span id="memberIdError"></span></td>
120. </tr>
121. <tr>
122. <!-- 用户名的表单域 -->
123. <td>真实姓名：</td>
124. <td><inputtype="text" name="member.name" value="" id="username"/><span id="userNameError"></span></td>
125. </tr>
126. <tr>
127. <!-- 密码的表单域 -->
128. <td>密码：</td>
129. <td><inputtype="password" name="member.pass" value="" id="memberpass"/><span id="passError"></span></td>
130. </tr>
131. <tr>
132. <!-- 密码的表单域 -->
133. <td>再次密码：</td>
134. <td><inputtype="password" name="password2" value="" id="memberpass2"/><span id="passError2"></span></td>
135. </tr>
136. <tr>
137. <!-- 性别的表单域 -->
138. <td>性别：</td>
139. <td><inputtype="radio" name="member.gender" id="gender" value="男生" />男<input type="radio" name="member.gender" id="gender" value="女生" />女<span id="genderError"></span></td>
140. </tr>
141. <tr>
142. <!-- email的表单域 -->
143. <td>E-mail：</td>
144. <td><inputtype="text" name="member.email" value="" id="email"/><span id="emailError"></span></td>
145. </tr>
146. <tr>
147. <!-- 出生日期 -->
148. <td>出生日期：</td>
149. <td><inputtype="text" name="member.birthday" value="" id="birthday"/><span id="birthdayError"></span></td>
150. </tr>
151. <tralign="center">
152. <tdcolspan="2"><input type="submit" id="loginSubmit" value="提交" /><input
153. type="reset" value="重填" /></td>
154. </tr>
155. </table>
156. </s:form></div>
157. </body>
158. </html>
如上红色标出的为实现了 AJAX 效果的 jquery 代码。
3. 后记
使用 jquery 实现 ajax 还是比较简单的。本身是一个非常轻量的框架。使用方便，扩张性好，非常推荐使用。
同时 struts2 对于 ajax 的支持还是比较好的，通过这种 json 的方式很方便的把 bean 的数据以 json 格式传递给客户端。
