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

最新推荐文章于 2026-06-27 03:20:11 发布

转载最新推荐文章于 2026-06-27 03:20:11 发布 · 1.1k 阅读

java 同时被 2 个专栏收录

101 篇文章

订阅专栏

Struts2

20 篇文章

订阅专栏

本文介绍了如何利用 jQuery 和 Struts2 实现 AJAX 功能，具体包括验证用户名的独特性，处理用户注册流程中的各种输入验证，并使用 JSON 格式返回结果。

1. 目标

目标使用 AJAX 实现如下效果：

当填入用户名的时候，光标移开进行 AJAX 验证，如果已经被注册提示如下：

注册失败

如果可以使用，提示如下：

注册成功

2. 实现过程

准备： jquery ， struts2 ，开发工具等这种环境问题不累述，大家自己准备。

主要工作如下

1. 开发 CheckMemberIdAction:

[java] view plain copy

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

[java] view plain copy

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

[xhtml] view plain copy

<?xml version="1.0" encoding="GBK"?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
<package name="strutsqs" extends="struts-default">
<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

[xhtml] view plain copy

<%@ 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>
<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>