AJAX学习之序列二:struts2 jquery json 实现AJAX 注册ID验证
2013-02-27 15:19
579 查看
1.
目标
目标使用
AJAX
实现如下效果:
当填入用户名的时候,光标移开进行
AJAX
验证,如果已经被注册提示如下:
如果可以使用,提示如下:
2.
实现过程
准备:
jquery
,
struts2
,开发工具等这种环境问题不累述,大家自己准备。
主要工作如下
1.
开发
CheckMemberIdAction:
3.
配置
Struts.xml
如上红色标出的为实现了
AJAX
效果的
jquery
代码。
3.
后记
使用
jquery
实现
ajax
还是比较简单的。本身是一个非常轻量的框架。使用方便,扩张性好,非常推荐使用。
同时
struts2
对于
ajax
的支持还是比较好的,通过这种
json
的方式很方便的把
bean
的数据以
json
格式传递给客户端。
目标
目标使用
AJAX
实现如下效果:
当填入用户名的时候,光标移开进行
AJAX
验证,如果已经被注册提示如下:
如果可以使用,提示如下:
2.
实现过程
准备:
jquery
,
struts2
,开发工具等这种环境问题不累述,大家自己准备。
主要工作如下
1.
开发
CheckMemberIdAction:
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
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
格式传递给客户端。
相关文章推荐
- AJAX学习之序列二:struts2 jquery json 实现AJAX 注册ID验证
- AJAX学习之序列二:struts2 jquery json 实现AJAX 注册ID验证
- struts2 json 与jquery整合实现ajax,用户注册校验
- Jquery_Ajax 注册验证(Struts2)<学习随笔>
- Jquery_Ajax 注册验证(Struts2)<学习随笔>
- Struts2 Jquery Json 实现AJax表单验证
- jquery+ajax实现注册实时验证实例详解
- jquery中用$.ajax实现注册(html、jquery、php、接口文档)、ajax验证用户提交数据
- Jquery、Json、Struts2、Spring实现Ajax动态功能以及注意事项
- 手写注册页面,并实现验证信息(AJAX,Jquery,正则表达式,密码强度验证)
- Jquery与ajax结合实现验证用户名(邮箱是否)已经被注册过
- 【Struts2】利用JQuery与struts2-json-plugin实现Struts2的Ajax功能并利用JSON传递数据
- 学习struts2建bbs总结五:使用jquery+ajax验证用户名是否存在以及struts效验信息不断重复的问题
- struts2 + spring +jquery实现AJAX (使用了struts2 的json插件)
- ajax,json学习笔记(三)JSON和jquery实现ajax
- jquery+ajax实现注册实时验证实例详解
- 黑马程序员_学习日记73_725ASP.NET(禁用Cookie、ASP.NET中的重要对象、JavaScript实现AJAX、两种Json格式的序列化方法、JQuery中实现ajax的五种方法)
- struts2学习笔记--使用struts2插件实现ajax处理(返回json数据)
- jquery返回json类型数据集合简单实现ajax返回多个数据
- jquery的ajax和getJson跨域获取json数据的实现方法