Struts 2 jQuery 表单提交将目标内容嵌套在目标内

问：

我在JSP中有这个形式：

<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<script>
    migas([
        { enlace: '<a href="#"><s:text name="breadcrumb.tituloFormAlta" /></a>', activo: false },
        { enlace: '<s:text name="breadcrumb.subtituloFormAlta" />', activo: true }
    ]);
</script>
<div id="ventanaAltaAplicacion" class="relative">
    <div class='col-12 tituloSeccion p-2 mt-2 mb-2'>
        <i class="fa-solid fa-square me-2"></i>
        <s:text name="altaAplicacion.tituloFormulario" />
    </div>
    <div class='col-12 p-0 mb-2 border'>
        <s:form id="formAltaAplicacion" name="formAltaAplicacion" cssClass="formulario needs-validation"
                validate="true">

            <div class="titulo p-2">
                <s:text name="altaAplicacion.datosForm" />
            </div>

            <div id="f1" class="border pt-3">

                <div class="row p-0 m-0">
                    <div class="col-6 p-0">
                        <div class="row p-0 m-0 mb-3">
                            <label for="nombreAplicacion" class="col-sm-2 col-form-label ">
                                <s:text name="altaAplicacion.nombre" />
                            </label>
                            <div class="col-sm-10">
                                <s:textfield id="nombreAplicacion" name="altaAplicacionBean.nombre" theme="simple"
                                             cssClass="form-control" cssError="form-control invalid"
                                             placeholder="Nombre de la aplicación" required="true"
                                />
                                <div class="invalid-feedback">
                                    <s:fielderror fieldName="altaAplicacionBean.nombre" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-6 p-0">
                        <div class="row p-0 m-0 mb-3">
                            <label for="tituloAplicacion" class="col-sm-2 col-form-label ">
                                <s:text name="altaAplicacion.titulo" />
                            </label>
                            <div class="col-sm-10">
                                <s:textfield id="tituloAplicacion" name="altaAplicacionBean.titulo" theme="simple"
                                             cssClass="form-control" cssError="form-control invalid"
                                             placeholder="Título de la aplicación" required="true"/>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row p-0 m-0">
                    <div class="row p-0 m-0 mb-3">
                        <label for="descripcion" class="col-sm-2 col-form-label">
                            <s:text name="altaAplicacion.descripcion" />
                        </label>
                        <div class="col-sm-10">
                            <s:textarea id="descripcion" name="altaAplicacionBean.descripcion" theme="simple" rows="5" cols="45"
                                        cssClass="form-control" placeholder="Descripción de la aplicación"
                                        required="false"/>
                        </div>
                    </div>
                </div>

                <div class="row p-0 m-0">
                    <div class="row p-0 m-0 mb-3">
                        <label for="wsRespuesta" class="col-sm-2 col-form-label">
                            <s:text name="altaAplicacion.wsRespuesta" />
                        </label>
                        <div class="col-sm-10">
                            <s:textfield id="wsRespuesta" name="altaAplicacionBean.wsRespuesta" theme="simple"
                                         cssClass="form-control" cssError="form-control invalid"
                                         placeholder="%{getText('altaAplicacion.plhRespuesta')}" required="false"/>

                        </div>
                    </div>
                </div>

                <div class="row p-0 m-0">
                    <div class="row p-0 m-0 mb-3">
                        <label for="wsRespuesta" class="col-sm-2 col-form-label">
                            <s:text name="altaAplicacion.wsIntermedio" />
                        </label>
                        <div class="col-sm-10">
                            <s:textfield id="wsIntermedio" name="altaAplicacionBean.wsIntermedio" theme="simple"
                                         cssClass="form-control" cssError="form-control invalid"
                                         placeholder="%{getText('altaAplicacion.plhWsIntermedio')}" required="false"/>
                        </div>
                    </div>
                </div>

                <div class="mb-3 row">
                    <div class="col-12 text-center">
                        <s:url var="guardarAltaAplicacion" action="guardarAltaAplicacion"/>
                        <sj:a
                                id="guardarAltaBoton"
                                formIds="formAltaAplicacion"
                                targets="ventanaAltaAplicacion"
                                button="true"
                                href="%{guardarAltaAplicacion}"
                                onBeforeTopics="onBeforeLoading"
                                onSuccessTopics="onCompleteLoading"
                                onErrorTopics="onErrorLoading"
                                cssClass="btn btn-light"
                        >
                            <s:text name="boton.guardar" />
                        </sj:a>
                    </div>
                </div>

                <s:if test="hasActionMessages()">
                    <div id="resultsId" class="row p-0 m-0">
                        <div class="row p-0 m-0 mb-3">
                            <s:actionmessage />
                        </div>
                    </div>
                </s:if>
            </div>
        </s:form>
    </div>
</div>

相应的操作非常简单，除了设置操作和验证消息外，基本上什么都不做：

@SkipValidation
public String altaAplicacion() {
    return SUCCESS;
}

public String guardarAltaAplicacion() {
    addActionMessage("Alta efectuada correctamente.");
    return SUCCESS;
}

public void validate() {
    if (StringUtils.isBlank(altaAplicacionBean.getNombre())) {
        addFieldError("altaAplicacionBean.nombre", "El nombre es requerido.");
    }
}

这些在 struts.xml 中使用以下方法映射：

    <action name="altaAplicacion"
            class="es.blahblah.action.altaAplicacion.AltaAplicacionAction"
            method="altaAplicacion">
        <result name="success">/jsp/altaAplicacion/altaAplicacion.jsp</result>
        <result name="input">/jsp/altaAplicacion/altaAplicacion.jsp</result>
    </action>

    <action name="guardarAltaAplicacion"
            class="es.blahblah.action.altaAplicacion.AltaAplicacionAction"
            method="guardarAltaAplicacion">
        <result name="success">/jsp/altaAplicacion/altaAplicacion.jsp</result>
        <result name="input">/jsp/altaAplicacion/altaAplicacion.jsp</result>
    </action>

当我单击提交按钮（ <sj：a id=“guardarAltaBoton” ...） 时，它工作正常，除了目标 div id=“ventanaAltaAplicacion”入到它自己的位置，所以我们从这里开始：

<div id="ventanaAltaAplicacion" class="relative">
    <div class="col-12 tituloSeccion p-2 mt-2 mb-2">
    <div class="col-12 p-0 mb-2 border">
</div>

对此：

<div id="ventanaAltaAplicacion" class="relative">
    <script>
        migas([
            { enlace: '<a href="#">Menú 1</a>', activo: false },
            { enlace: 'Formulario de Alta nueva aplicación', activo: true }
        ]);
    </script>
    <div id="ventanaAltaAplicacion" class="relative">
        <div class="col-12 tituloSeccion p-2 mt-2 mb-2">
        <div class="col-12 p-0 mb-2 border">
    </div>
</div>

它只发生一次。成功的点击效果很好，并且与嵌套的 div 保持相同的结构，所以这不是一个大问题，但我想了解为什么会发生这种情况。