`

AJAX提交Struts2表单(服务器端validation校验出错提示)

 
阅读更多

1.目标

   在基于Struts2的应用中，利用AJAX方式提交表单实现一个登陆验证Action，将服务器端验证结果展现在页面上

字段错误展示：

action 错误提示

2.技术实现

   利用struts2-jquery插件和struts2-json插件实现
3.实现步骤

   3.1依赖jar包

  除了struts2-core-2.2.3.jar包以外，还要下载两个jar包

  struts2-jquery-plugin-3.1.0.jar

  struts2-json-plugin-2.2.3.jar

  3.2编写登陆处理类Action

    这个Action和我们普通的Action没有任何区别

 

[java] view plaincopyprint?
  1. package com.crazycoder2010.struts2;  
  2.   
  3. import com.opensymphony.xwork2.ActionSupport;  
  4.   
  5. public class LoginAction extends ActionSupport {  
  6.     private static final long serialVersionUID = 6627313805146336838L;  
  7.     private String name;  
  8.     private String password;  
  9.     public String getName() {  
  10.         return name;  
  11.     }  
  12.     public void setName(String name) {  
  13.         this.name = name;  
  14.     }  
  15.     public String getPassword() {  
  16.         return password;  
  17.     }  
  18.     public void setPassword(String password) {  
  19.         this.password = password;  
  20.     }  
  21.     @Override  
  22.     public String execute() throws Exception {  
  23.         if(!("Kevin".equals(this.name)&&"111111".equals(this.password))){  
  24.             this.addActionError("Wrong!");  
  25.         }  
  26.         return INPUT;  
  27.     }  
  28. }  
   3.3为登陆程序添加验证文件LoginAction-Validation.xml(和LoginAction放置在同一个目录下)

 

 

[html] view plaincopyprint?
  1. <?xml version="1.0" encoding="UTF-8" ?>  
  2. <!DOCTYPE validators PUBLIC "-//OpenSymphony Group//XWork Validator 1.0.2//EN" "http://www.opensymphony.com/xwork/xwork-validator-1.0.2.dtd">  
  3. <validators>  
  4.     <field name="name">  
  5.         <field-validator type="requiredstring">  
  6.             <param name="trim">true</param>  
  7.             <message>Name is required.</message>  
  8.         </field-validator>  
  9.         <field-validator type="stringlength">  
  10.             <param name="minLength">2</param>  
  11.             <param name="maxLength">60</param>  
  12.             <message>Name must be between ${minLength} and ${maxLength} characters long.</message>  
  13.         </field-validator>  
  14.     </field>  
  15.     <field name="password">  
  16.         <field-validator type="requiredstring">  
  17.             <param name="trim">true</param>  
  18.             <message>Password is required.</message>  
  19.         </field-validator>  
  20.         <field-validator type="stringlength">  
  21.             <param name="minLength">2</param>  
  22.             <param name="maxLength">60</param>  
  23.             <message>Password must be between ${minLength} and ${maxLength} characters long.</message>  
  24.         </field-validator>  
  25.     </field>  
  26. </validators>  
3.4配置Action类struts.xml

 

这个Action的配置有些特殊，注意

   a.package需要继承自json-default包

   b.action的拦截器引用jsonValidationWorkflowStack

   c.result的type类型为json

   d.配置该action需要转化成json对象的字段includeProperties

 

[html] view plaincopyprint?
  1. <?xml version="1.0" encoding="UTF-8" ?>  
  2. <!DOCTYPE struts PUBLIC  
  3.   "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"  
  4.   "http://struts.apache.org/dtds/struts-2.0.dtd">  
  5. <struts>  
  6.     <package name="default" extends="json-default">  
  7.         <action name="login" class="com.crazycoder2010.struts2.LoginAction">  
  8.             <interceptor-ref name="jsonValidationWorkflowStack"></interceptor-ref>  
  9.             <result name="input" type="json">  
  10.                 <param name="ignoreHierarchy">false</param>  
  11.                 <param name="includeProperties">actionErrors\[\d+\], fieldErrors\..+$, actionMessages\[\d+\]</param>  
  12.             </result>  
  13.         </action>  
  14.     </package>  
  15. </struts>  
3.5编写登陆页面login.jsp

 

   a.将struts2-jquery的taglib引入页面中

   b.在<head>元素中通过<sj:head/>标签引入jquery的css和js文件（这些文件都压缩在struts2-jquery-plugins.jar包中，因此不需要单独下载jquery相关的js了）

   c.提交submit按钮改用struts2-jquery插件中的

<sj:submit onCompleteTopics="complete"    --在服务器端处理完毕将结果返回到页面时所触发的javascript函数

targets="result"   --用来展示结果的容器ID列表，以','分割

onBeforeTopics='clearError'   --在将数据提交到服务器端以前所触发的javascript函数，如做一些客户端的验证错误提示信息的清除

返回json结果字符串示例：

{"actionErrors":[],"actionMessages":[],"fieldErrors":{"name":["Name is required."],"password":["Password is required."]}}

 

[html] view plaincopyprint?
  1. <%@ page language="java" contentType="text/html; charset=utf-8"  pageEncoding="utf-8"%>  
  2. <%@ taglib prefix="s" uri="/struts-tags"%>  
  3. <%@ taglib prefix="sj" uri="/struts-jquery-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. <style type="text/css">  
  8.     .errorLabel{color: red;}  
  9. </style>  
  10. <sj:head jquerytheme="cupertino" ajaxcache="false" compressed="false"/>  
  11. </head>  
  12. <body>  
  13.     <s:form action="login" method="post" theme="simple" namespace="/">  
  14.         <ul id="errorMessages"></ul>  
  15.         <p>User Name:</p>  
  16.         <p><input name="name"/><span id="error_name"></span></p>  
  17.         <p>Password:</p>  
  18.         <p><input type="password" name="password"/><span id="error_password"></span></p>  
  19.         <sj:submit   
  20.             onCompleteTopics="complete"   
  21.             targets="result"   
  22.             onBeforeTopics="clearError"  
  23.             value="Login"/>  
  24.     </s:form>  
  25. <script type="text/javascript">  
  26.     $.subscribe('clearError', function(event,data) {  
  27.         $("#errorMessages").html("");  
  28.         $('.errorLabel').html('').removeClass('errorLabel');  
  29.     });  
  30.     $.subscribe('complete', function(event,data) {  
  31.         $("#errorMessages").html("");//先将上次认证的错误消息清除掉  
  32.         $('.errorLabel').html('').removeClass('errorLabel');  
  33.           
  34.         var json = $.parseJSON(event.originalEvent.request.responseText);  
  35.         if(json.actionErrors && json.actionErrors.length>0){//判断有没有actionErrors  
  36.             $.each(json.actionErrors,function(index,data){  
  37.                 $("#errorMessages").append("<li>"+data+"</li>");  
  38.             });  
  39.             return;  
  40.         }  
  41.         if(json.fieldErrors && !isEmpty(json.fieldErrors)){//判断有没有fieldError(LoginAction-validation.xml验证错误)  
  42.             $.each(json.fieldErrors,function(index,value){//index就是field的name,value就是该filed对应的错误列表，这里取第一个  
  43.                 $("#error_"+index).html(value[0]);  
  44.                 $("#error_"+index).addClass("errorLabel");  
  45.             });  
  46.             return;  
  47.         }  
  48.         alert("登陆成功");//既没有actionError有没有fieldError则登陆成功  
  49.     });  
  50.     function isEmpty(obj){//判断对象是否为空(处理Object obj = {}这种情况认为isEmpty=true)  
  51.         for(var p in obj){  
  52.             return false;  
  53.         }  
  54.         return true;  
  55.     }  
  56. </script>  
  57. </body>  
分享到：
| jquery小技巧
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    struts2入门教程

    ·Struts 2.0中实现表单数据校验（Validation） ·拦截器（Interceptor） ·Struts 2中实现IoC ·Struts 2中实现文件上传 ·Struts 2中的OGNL ·Strus 2的新表单标签的使用 ·Struts 2与AJAX ·Struts2分页 ...

    个人认为目前最完备的Struts2教程

    06 在Struts 2.0中实现表单数据校验（Validation） 07 Struts 2的基石——拦截器（Interceptor） 08 在Struts 2中实现IoC 09 在Struts 2中实现文件上传 10 在Struts 2中实现CRUD 11 Struts 2中的OGNL 12 Struts 2的...

    struts2.0中文教程

    06 在Struts 2.0中实现表单数据校验（Validation） 07 Struts 2的基石——拦截器（Interceptor） 08 在Struts 2中实现IoC 09 在Struts 2中实现文件上传 10 在Struts 2中实现CRUD 11 Struts 2中的OGNL 12 trus 2的新...

    Struts 2.0系列(MAX)

    在Struts 2.0中实现表单数据校验（Validation） Struts 2的基石——拦截器（Interceptor） 在Struts 2中实现IoC 在Struts 2中实现文件上传 在Struts 2中实现CRUD Struts 2中的OGNL Strus 2的新表单标志的使用 ...

    Struts2.0中文教程权威版

    06 在Struts 2.0中实现表单数据校验（Validation） 07 Struts 2的基石——拦截器（Interceptor） 08 在Struts 2中实现IoC 09 在Struts 2中实现文件上传 10 在Struts 2中实现CRUD 11 Struts 2中的OGNL 12 trus 2的新...

    struts2[1].0标签详解

    Struts 2的基石——拦截器（Interceptor);在Struts 2_0中国际化(i18n)您的应用程序;在Struts 2_0中实现表单数据校验（Validation）;Struts 2与AJAX;在Struts 2中实现IoC......

    struts自我学习过程程序以及说明

    表单校验: avlidation包: LocaleConverter.java Locales.java ValidationHWorld.java globalMessage_en_US.properties globalMessage_zh_CN.properties struts.properties xwork-conversion.propertie ...

    千方百计笔试题大全

    244、客服端调用EJB对象的几个基本步骤 56 245、 如何给weblogic指定大小的内存? 56 246、如何设定的weblogic的热启动模式(开发模式)与产品发布模式? 57 247、如何启动时不需输入用户名与密码? 57 248、在weblogic...

    java面试宝典

    244、客服端调用EJB对象的几个基本步骤 56 245、 如何给weblogic指定大小的内存? 56 246、如何设定的weblogic的热启动模式(开发模式)与产品发布模式? 57 247、如何启动时不需输入用户名与密码? 57 248、在...

Magicbox
Global site tag (gtag.js) - Google Analytics