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

1.目标

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

字段错误展示:

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

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

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没有任何区别

package com.crazycoder2010.struts2;  
  
import com.opensymphony.xwork2.ActionSupport;  
  
public class LoginAction extends ActionSupport {  
    private static final long serialVersionUID = 6627313805146336838L;  
    private String name;  
    private String password;  
    public String getName() {  
        return name;  
    }  
    public void setName(String name) {  
        this.name = name;  
    }  
    public String getPassword() {  
        return password;  
    }  
    public void setPassword(String password) {  
        this.password = password;  
    }  
    @Override  
    public String execute() throws Exception {  
        if(!("Kevin".equals(this.name)&&"111111".equals(this.password))){  
            this.addActionError("Wrong!");  
        }  
        return INPUT;  
    }  
}  
   3.3为登陆程序添加验证文件LoginAction-Validation.xml(和LoginAction放置在同一个目录下)
  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

  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."]}}

  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>  

相关推荐