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

发布时间：2020-12-15 22:09:44 所属栏目：百科来源：网络整理

导读：1. 目标目标使用 AJAX 实现如下效果：当填入用户名的时候，光标移开进行 AJAX 验证，如果已经被注册提示如下：如果可以使用，提示如下： 2. 实现过程准备： jquery ， struts2 ，开发工具等这种环境问题不累述，大家自己准备。主要工作如下 1. 开发 Che

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"?>  <!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

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

如上红色标出的为实现了 AJAX 效果的 jquery 代码。

3. 后记

使用 jquery 实现 ajax 还是比较简单的。本身是一个非常轻量的框架。使用方便，扩张性好，非常推荐使用。

同时 struts2 对于 ajax 的支持还是比较好的，通过这种 json 的方式很方便的把 bean 的数据以 json 格式传递给客户端。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!