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

前端之家收集整理的这篇文章主要介绍了AJAX学习之序列二:struts2 jquery json 实现AJAX 注册ID验证前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

1.目标

目标使用AJAX实现如下效果

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

如果可以使用,提示如下:

2.实现过程

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

主要工作如下

1.开发CheckMemberIdAction:

[java] view plain copy
  1. packagecom.contentsearch.action;
  2. importcom.opensymphony.xwork2.ActionSupport;
  3. publicclassCheckMemberIdActionextendsActionSupport{
  4. privateStringisMemberIdUsed;
  5. privateStringmemberid;
  6. publicStringgetMemberid(){
  7. returnmemberid;
  8. }
  9. voidsetMemberid(Stringmemberid){
  10. this.memberid=memberid;
  11. }
  12. publicStringgetIsMemberIdUsed(){
  13. returnisMemberIdUsed;
  14. }
  15. voidsetIsMemberIdUsed(StringisMemberIdUsed){
  16. this.isMemberIdUsed=isMemberIdUsed;
  17. }
  18. //处理用户请求的execute方法
  19. publicStringexecute()throwsException{
  20. if("sky".equals(memberid)){
  21. this.setIsMemberIdUsed("yes");
  22. }else{
  23. this.setIsMemberIdUsed("no");
  24. }
  25. returnSUCCESS;
  26. }
  27. }

2:开发Member Pojo

[java] packagecom.contentsearch.dao.pojo;
  • classMember{
  • privatelongid;
  • privateStringmemberid;
  • privateStringname;
  • privateStringpass;
  • privateStringemail;
  • privateStringgender;
  • privateStringbirthday;
  • publicStringgetMemberid(){
  • returnmemberid;
  • }
  • voidsetMemberid(Stringmemberid){
  • this.memberid=memberid;
  • }
  • longgetId(){
  • returnid;
  • }
  • voidsetId(longid){
  • this.id=id;
  • }
  • publicStringgetName(){
  • returnname;
  • }
  • voidsetName(Stringname){
  • this.name=name;
  • }
  • publicStringgetPass(){
  • returnpass;
  • }
  • voidsetPass(Stringpass){
  • this.pass=pass;
  • }
  • publicStringgetEmail(){
  • returnemail;
  • }
  • voidsetEmail(Stringemail){
  • this.email=email;
  • }
  • publicStringgetGender(){
  • returngender;
  • }
  • voidsetGender(Stringgender){
  • this.gender=gender;
  • }
  • publicStringgetBirthday(){
  • returnbirthday;
  • }
  • voidsetBirthday(Stringbirthday){
  • this.birthday=birthday;
  • }
  • }
  • 3.配置Struts.xml

    [xhtml]
  • <?xmlversion="1.0"encoding="GBK"?>
  • <!--指定Struts2配置文件的DTD信息-->
  • <!DOCTYPEstrutsPUBLIC
  • "-//ApacheSoftwareFoundation//DTDStrutsConfiguration2.0//EN"
  • "http://struts.apache.org/dtds/struts-2.0.dtd">
  • <!--struts是Struts2配置文件的根元素-->
  • <struts<!--Struts2的Action必须放在指定的包空间下定义-->
  • packagename="strutsqs"extends="struts-default">
  • <!--定义login的Action,该Action的实现类为lee.Action类-->
  • actionname="Login"class="com.contentsearch.action.LoginAction"<!--定义处理结果和资源之间映射关系。-->
  • resultname="input">/login.jsp</result>
  • resultname="error">/error.jsp>
  • resultname="success">/welcome.jspaction>
  • package>
  • packagename="strutsjson"extends="json-default"actionname="CheckMemberId"class="com.contentsearch.action.CheckMemberIdAction"resulttype="json"/>
  • >
  • constantname="struts.objectFactory"value="spring"/>
  • >
  • 4.开发register.jsp

    [xhtml] <%@pagelanguage="java"contentType="text/html;charset=UTF-8"
  • pageEncoding="UTF-8"%<%@taglibprefix="s"uri="/struts-tags"%>
  • <!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"htmlheadMetahttp-equiv="Content-Type"content="text/html;charset=UTF-8"title>Inserttitleherelinktype="text/css"href="css/jquery-ui-1.7.custom.css"mce_href="css/jquery-ui-1.7.custom.css"
  • rel="stylesheet"/>
  • mce:styletype="text/css"><!--
  • body{
  • font:62.5%"TrebuchetMS",sans-serif;
  • margin:50px;
  • }
  • .demo{
  • align:center;
  • border:1pxsolid#CA8EFF;
  • width:500px;
  • height:400px;
  • padding:10px;
  • float:center;
  • background:#E0E0E0;
  • }
  • -->mce:stylestyletype="text/css"mce_bogus="1">body{
  • font:62.5%"TrebuchetMS",sans-serif;
  • margin:50px;
  • }
  • .demo{
  • align:center;
  • border:1pxsolid#CA8EFF;
  • width:500px;
  • height:400px;
  • padding:10px;
  • float:center;
  • background:#E0E0E0;
  • }stylemce:scriptsrc="js/jQuery/jquery-1.3.2.min.js"mce_src="js/jQuery/jquery-1.3.2.min.js"mce:scriptmce:scripttype="text/javascript"><!--
  • $(document).ready(function(){
  • ClearErrorInfo();
  • $("#loginSubmit").click(function(){
  • ClearErrorInfo();
  • varflag=true;
  • varreg=/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((/.[a-zA-Z0-9_-]{2,3}){1,2})$/;
  • if($.trim($("#memberid").val())==""){
  • $("#memberIdError").html("fontcolor='red'>用户名不能为空!font>");
  • flag=false;
  • }
  • if($.trim($("#username").val())==""){
  • $("#userNameError").html(">姓名不能为空!>");
  • flag=false;
  • }
  • if($.trim($("#memberpass").val())==""){
  • $("#passError").html(">密码不能为空!>");
  • flag=false;
  • }else{
  • if($.trim($("#memberpass").val())!=$.trim($("#memberpass2").val())){
  • $("#passError2").html(">两次密码不一致!>");
  • flag=false;
  • }
  • }
  • if($.trim($("#gender").val())==""){
  • $("#genderError").html(">性别不能为空!>");
  • flag=false;
  • }
  • varemail=$.trim($("#email").val());
  • if(email==""){
  • $("#emailError").html(">电子邮箱不能为空!>");
  • flag=false;
  • }else{
  • varisOk=reg.test(email);
  • if(!isOk){
  • $("#emailError").html(">电子邮箱格式不正确!>");
  • }
  • }
  • if($.trim($("#birthday").val())==""){
  • $("#birthdayError").html(">出生日期不能为空!>");
  • flag=false;
  • }
  • returnflag;
  • });
  • $("#memberid").blur(function(){
  • $.post("CheckMemberId",{memberid:$("#memberid").val()},
  • function(data,textStatus){
  • if(data.isMemberIdUsed=="yes"){
  • $("#memberIdError").html(">用户名已经被注册,请重新选择一个!>");
  • }
  • },"json");
  • });
  • functionClearErrorInfo(){
  • $("#memberIdError").html("");
  • $("#userNameError").html("");
  • $("#passError").html("");
  • $("#passError2").html("");
  • $("#genderError").html("");
  • $("#emailError").html("");
  • $("#birthdayError").html("");
  • }
  • });
  • //-->
  • bodydivclass="demo"><!--提交请求参数的表单-->s:formaction="Register"
  • name="userform"tablealign="center"captionh3>会员注册tr>
  • <!--用户名的表单域-->
  • td>用户名inputtype="text"name="member.memberid"value=""id="memberid"/>spanid="memberidError"spanspanid="memberIdError"<!--用户名的表单域-->
  • >真实姓名:inputtype="text"name="member.name"value=""id="username"spanid="userNameError"<!--密码的表单域-->
  • >密码:inputtype="password"name="member.pass"value=""id="memberpass"spanid="passError"<!--密码的表单域-->
  • >再次密码:inputtype="password"name="password2"value=""id="memberpass2"spanid="passError2"<!--性别的表单域-->
  • >性别:inputtype="radio"name="member.gender"id="gender"value="男生"/>inputtype="radio"name="member.gender"id="gender"value="女生"/>spanid="genderError"<!--email的表单域-->
  • >E-mail:inputtype="text"name="member.email"value=""id="email"spanid="emailError"<!--出生日期-->
  • >出生日期:inputtype="text"name="member.birthday"value=""id="birthday"spanid="birthdayError"tralign="center"tdcolspan="2"inputtype="submit"id="loginSubmit"value="提交"input
  • type="reset"value="重填"tables:formdiv>
  • 如上红色标出的为实现了AJAX效果的jquery代码

    3.后记

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

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

    原文链接:https://www.f2er.com/ajax/165407.html

    猜你在找的Ajax相关文章