1

我有一个 JSP 页面。我正在使用struts2。这是我的 JSP 页面

在此处输入图像描述

如您所见,上面有一个表格,另一个手风琴显示了一些项目。显示组件列表的组件。并有一个添加按钮。当我单击添加按钮时,它将调用一个 Ajax 调用并返回 HTML,我将其设置为DIV并将其显示为弹出表单。

在此处输入图像描述

输入数据后,单击保存,它将调用 Ajax 并保存到数据库。然后它将重定向到另一个动作以获取更新的列表并将列表返回给 ajax。我在组件选项卡中显示的结果。 在此处输入图像描述

这是工作。现在,在弹出表单中,一些字段是必需的,如果不输入这些字段,它将调用动作类(动作验证器.xml 文件用于验证所需字段。)并将返回错误,但作为其 ajax 调用,结果数据将在组件选项卡内设置。

在此处输入图像描述 (此处显示的错误消息是另一个表单的错误。但此表单也会显示相同的错误消息。在该错误消息下方,表单也会显示。所有将在组件选项卡内)我希望显示错误结果以相同的弹出形式。

jQuery 阿贾克斯

$(document).on('click', ".saveRow", function(){
        var formId=$(this).closest("form").attr("id");
        var form = $("#"+formId);
        var htmlId=formId;
        htmlId=getDivId(htmlId);
        form.submit(function () {
            $('.saveRow').html('Saving...').fadeIn();
            var urlAction=form.attr('action');
            var dataFields=form.serialize();
            callActionUsingAjax(urlAction, dataFields, function (data) {
                    var ajaxActionResult=ajaxResult(data);
                    setHTMLContent(ajaxActionResult,htmlId);
                    $('.popUpForm').dialog("close");
            });
         return false;
        });
    });

function callActionUsingAjax(urlAction, dataFields, callback)
        {
            $.ajax({
                type: "post",
                url: urlAction,
                data: dataFields,
                success: function (data) {
                    callback(data);
                }
            });
        }

    function ajaxResult(data)
    {
        var ajaxResult= $('<div/>').html(data),
        $ajaxContent = ajaxResult.find('#ajaxContent');
        var ajaxActionResult=$('<div/>').html($ajaxContent);
        ajaxActionResult.find('#ajaxContent').removeClass("crudItems");
        ajaxActionResult.find('#resultContent').removeClass("includestyle");
        ajaxActionResult.find('#ajaxContent').find("#footer").remove();
        return ajaxActionResult;
    }

    function setHTMLContent(ajaxActionResult,htmlId) {
        $("#"+htmlId).html(ajaxActionResult);
        $("#"+htmlId).height(315);
    }

alert(data);如果我用整个 html 文本给它警报,那么在 ajax 成功中。我试过了,它用"undefined"alert(data.redirect)发出警报。

我的 struts.xml

<action name="saveDimComponent" 
    class="com.vxl.appanalytix.webapp.action.DimComponentAction"
    method="save">
    <result name="input">/WEB-INF/pages/dimComponentForm.jsp</result>
    <result name="cancel" type="redirectAction">dimComponents</result>
    <result name="delete" type="redirectAction">dimComponents</result>
    <result name="success" type="redirectAction">dimComponents</result>
</action>

(即,如果输入结果,它应该显示有错误的弹出表单)

更新 1

DimComponent-validation.xml

<!DOCTYPE validators PUBLIC "-//OpenSymphony Group//XWork Validator 1.0.2//EN"
    "http://web.archive.org/web/20090222210559/http://www.opensymphony.com/xwork/xwork-validator-1.0.2.dtd">
<validators>
    <field name="dimComponent.componentId">
        <field-validator type="requiredstring">
            <message key="errors.required"/>
        </field-validator>
    </field>
    <field name="dimComponent.componentDesc">
        <field-validator type="requiredstring">
            <message key="errors.required"/>
        </field-validator>
    </field>
</validators> 

DimComponentAction-validation.xml

<!DOCTYPE validators PUBLIC "-//OpenSymphony Group//XWork Validator 1.0.2//EN"
    "http://web.archive.org/web/20090222210559/http://www.opensymphony.com/xwork/xwork-validator-1.0.2.dtd">
<validators>
    <field name="dimComponent">
        <field-validator type="visitor">
            <param name="appendPrefix">false</param>
            <message/>
        </field-validator>
    </field>
</validators> 

DimComponentAction.java

public class DimComponentAction extends BaseAction implements Preparable {

   private List dimComponents;
    private DimComponent dimComponent;
    private Long componentKey;
    private String query;

    @Autowired
    private DimComponentManager dimComponentManager;

    //getter and setter

    public void prepare() {
        if (getRequest().getMethod().equalsIgnoreCase("post")) {
            // prevent failures on new
            String dimComponentKey = getRequest().getParameter("dimComponent.componentKey");
            if (dimComponentKey != null && !dimComponentKey.equals("")) {

                dimComponent = dimComponentManager.get(new              Long(Integer.parseInt(dimComponentKey)));
            }
        }
    }
   public String list() {
        try {
           dimComponents = dimComponentManager.search(query, DimComponent.class);
        } catch (SearchException se) {
            addActionError(se.getMessage());
            dimComponents = dimComponentManager.getAll();
        }
        return SUCCESS;
    }
    public String delete() {
        dimComponentManager.remove(dimComponent.getComponentKey());
        saveMessage(getText("dimComponent.deleted"));

        return SUCCESS;
    }
    public String edit() {
        setComponentValues();
        if (componentKey != null) {
            dimComponent = dimComponentManager.get(componentKey);
        } else {
            dimComponent = new DimComponent();
        }
        return SUCCESS;
    }

    public String save() throws Exception {
        if (cancel != null) {
            return "cancel";
        }

        if (delete != null) {
            return delete();
        }

        boolean isNew = (dimComponent.getComponentKey() == null);

        dimComponentManager.save(dimComponent);
        String key = (isNew) ? "dimComponent.added" : "dimComponent.updated";
        saveMessage(getText(key));

        if (!isNew) {
            return INPUT;
        } else {
            return SUCCESS;
        }
    }
4

1 回答 1

0

现在,您success在 jQuery 中使用回调来处理成功的请求和未成功处理的请求。不幸的是,您的服务器代码迫使您这样做,因为显然您无法从响应正文中推断出请求未成功处理。Struts 操作结果未包含在 HTTP 响应中,因此您需要找到另一种方法来区分结果。

如果您在输入无效时更改服务器端代码以设置错误代码(例如,400 Bad Request)。如果已经到位,您可以像这样更改您的 jQuery 代码:

function callActionUsingAjax(urlAction, dataFields, callback) {
    $.ajax({
        type: "post",
        url: urlAction,
        data: dataFields,
        success: function (data) {
            callback(data);
        },
        error: function (data) {
            // Somehow process the validation messages,
            // like you seem to be doing already.
        }
    });

    // etc...
}

现在您有两个回调:一个在请求成功时调用,另一个显示错误弹出窗口。后者甚至可以在多个页面上重复使用:)。

于 2013-07-31T07:46:14.287 回答