json - Struts ajax 表单验证

Question

我在 ajax 表单验证方面遇到问题。我正在使用 struts-core 2.3.1.2、struts-jquery-plugin 3.3.0 和 struts-json-plugin。

如果 ajax 表单将由 ajax 请求提交并且验证失败，则会出现此问题。因为整个表单将被放置在结果元素上。因此，您可以在 ajax sumbit 按钮上激活 ajax 验证。 http://code.google.com/p/struts2-jquery/wiki/Validation

这里还有过时的信息: http://struts.apache.org/2.2.3.1/docs/ajax-validation.html

但是 struts-default.xml 中缺少拦截器“jsonValidationWorkflowStack”，如帖子中所写:jsonValidationWorkflowStack seems to be removed in Struts 2.3.1

它源自 struts-plugin.xml 中的 struts-json-plugin。我不知道如何直接使用它，但我在 struts.xml 中构建了自己的堆栈:

<!-- Sample JSON validation stack  -->
<interceptor-stack name="jsonValidationWorkflowStack">
            <interceptor-ref name="basicStack"/>
            <interceptor-ref name="validation">
                <param name="excludeMethods">input,back,cancel</param>
            </interceptor-ref>
            <interceptor-ref name="jsonValidation"/>
            <interceptor-ref name="workflow"/>
        </interceptor-stack> 
    </interceptors>
<action name="updateMySettings" method="execute" class="de.ra.daod.actions.MyAppSettingAction">
        <interceptor-ref name="jsonValidationWorkflowStack"/>
                    <!-- This is not beauty within ajax -->
        <result name="input">/WEB-INF/jsp/mysetting_ajax.jsp</result>
        <result name="success" type="stream">
            <param name="contentType">text/html</param>
            <param name="inputName">inputStream</param>
        </result>
    </action>

我的表单看起来像:

<s:head />
<sj:head />
    <!-- This files are needed for AJAX Validation of XHTML Forms -->
    <script src="${pageContext.request.contextPath}/struts/xhtml/validation.js" type="text/javascript"></script>

<s:form id="form" action="private/updateMySettings" theme="xhtml">
                <s:textfield id="screenRes" key="appSetting.screenResolution" label="Screen resolution" required="true" />
<s:select key="appSetting.screenDepth" label="Color depth" list="#{'8':'8','16':'16','24':'24'}" required="true" />
<sj:submit value="Update Settings" targets="status" validate="true"/>
            </s:form>

不幸的是，如果验证失败，我会收到一个 javascript 错误:

Uncaught TypeError: Object #<Object> has no method 'indexOf'
f.extend.ajax  jquery-1.7.1.min.js:4
b.fn.ajaxSubmit
a.struts2_jquery.validateForm  jquery.struts2-3.3.0.min.js:18
a.subscribeHandler.h.beforeSubmit  jquery.struts2-3.3.0.min.js:18
b.fn.ajaxSubmit
a.subscribeHandler.e  jquery.struts2-3.3.0.min.js:18
e.extend.each  jquery-1.7.1.min.js:2
a.subscribeHandler.e  jquery.struts2-3.3.0.min.js:18
f.event.dispatch  jquery-1.7.1.min.js:3
f.event.add.h.handle.i  jquery-1.7.1.min.js:3
f.event.trigger  jquery-1.7.1.min.js:3
f.fn.extend.trigger  jquery-1.7.1.min.js:3
e.extend.each  jquery-1.7.1.min.js:2
e.fn.e.each  jquery-1.7.1.min.js:2
f.fn.extend.trigger  jquery-1.7.1.min.js:3
d.fn.extend.publish  jquery.subscribe.min.js:16
e.extend.each  jquery-1.7.1.min.js:2
d.fn.extend.publish  jquery.subscribe.min.js:16
(anonymous function)  jquery.struts2-3.3.0.min.js:18
f.event.dispatch  jquery-1.7.1.min.js:3
f.event.add.h.handle.i  jquery-1.7.1.min.js:3

似乎无法处理响应中的 json 对象，我不知道为什么，因为我遵循了旧的说明。我认为原因是 struts/utils.js 中的 StrutsUtils.getValidationErrors 函数(如果该函数与 json 对象一起使用)，但我不确定。有人可以帮忙吗？

Answer 1

我猜流结果和 ajax 不能很好地协同工作。只需删除目标属性。 – jogep

我不同意你的观点，因为 AJAX 的宗旨不是加载新页面，而是加载任何内容到当前页面，这就是我使用 AJAX 提交按钮的原因。在不重新加载页面本身的情况下通知用户该操作。解决方法是使用 javascript 清除 status div 元素的内容。我认为这可以在 struts2-jquery-plugin 中自动化。这是我的表单，嵌入在选项卡式 Pane 中。

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>

<s:if test="appSetting != null">
<h3>Application settings</h3>
<div id="status" class="welcome"></div> 
<table>
    <tr>
        <td>
            <s:form id="form" action="updateMySettings" theme="xhtml">
                <s:textfield id="screenRes" key="appSetting.screenResolution"
                    label="Screen resolution" required="true" />
                <s:select key="appSetting.screenDepth" label="Color depth"
                    list="#{'8':'8','16':'16','24':'24'}" required="true" />
                <sj:submit id="updateSetting" value="Update Settings" targets="status" validate="true" />
            </s:form>
        </td>
        <td valign="top">
            <button id="fullScreen">Use full screen</button>
            <button id="fullBrowser">Use full browser</button>
        </td>
    </tr>
</table>
<script>
$("#fullScreen").click(function() {
    scr_width = Math.max(screen.width,screen.height);
    scr_height = Math.min(screen.width,screen.height);
    $("#screenRes").val(scr_width + 'x' + scr_height);
});
$("#fullBrowser").click(function() {
    brw_width = Math.max(window.innerWidth, window.innerHeight);
    brw_height = Math.min(window.innerWidth, window.innerHeight);
    $("#screenRes").val(brw_width + 'x' + brw_height);
});
$("#updateSetting").click(function() {
    $("#status").empty();
})
</script>
</s:if>
<s:else>
<p>No settings available.</p>
</s:else>

效果非常好。