在 jQuery 对话框中验证表单服务器端 Spring MVC 3

Question

我在 jQuery 对话框中验证表单时遇到问题。在这个项目中，我也在使用瓷砖。那是我的代码：

控制器：

@RequestMapping(value = "/popupOpen.do")
protected ModelAndView popupOpen(@RequestParam String idDivisaValor, HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException
{

    ModelAndView mav = new ModelAndView();

    // Obtain object
    DivisaValor divisaValor = gestorCoberturas.obtenerDivisaValor(idDivisaValor);
    mav.addObject("divisaValor", divisaValor);

    // Add selector list
    ArrayList<Divisa> divisas = new ArrayList<Divisa>(gestorDivisas.obtenerDivisas());
    mav.addObject("divisas", divisas);

    mav.setViewName("/ajax/mantenimiento/divisas/crearModificarDivisaValor");

    return mav;
}
@RequestMapping(value = "/popupSave.do")
    protected ModelAndView popupSave(@Valid DivisaValor divisaValor, BindingResult result, HttpServletRequest request,
            HttpServletResponse response) throws IOException, ServletException
    {
        ModelAndView mav = new ModelAndView();

        if (result.hasErrors())
        {
            // Mark error to ajax return
            response.setStatus(HttpServletResponse.SC_CONFLICT);
            // Selector de divisas
            ArrayList<Divisa> divisas = new ArrayList<Divisa>(gestorDivisas.obtenerDivisas());
            request.setAttribute("divisas", divisas);

            // Validate name if exists
            if (gestorDivisas.existeNombre(divisaValor.getNombre()))
                result.addError(new ObjectError("divisaValor", "El nombre seleccionado ya existe"));

            mav.addObject("divisaValor", divisaValor);
            mav.setViewName("/ajax/mantenimiento/divisas/crearModificarDivisaValor");
        }
        else
        {
            // ALL OK
            gestorCoberturas.modificarDivisaValor(divisaValor);

            // redirect to the table list
            mav.setViewName("redirect:/mantenimiento/divisas/crearModificarCobertura.do?idCoberturaDivisas="
                    + divisaValor.getCobertura().getId());

        }
        return mav;
    }

打开对话框的 JSP：

//JSP (crearModificarCobertura.jsp)
............
......
<script>
function modificarDivisaValor(idDivisaValor) {
        $("#idDivisaValor").val(idDivisaValor);
        openDialog("./popupOpen.do","#dialog", "Modificar divisa valor", "380", "220");
    }

function openDialog(url, idDiv, title, width, height) {
        popupDialog.dialog('option', 'title', title);
        popupDialog.dialog('option', 'width', width);
        popupDialog.dialog('option', 'height', height);
        popupDialog.html('');
        loadPopup(url, idDiv);
        popupDialog.dialog('open');
    }

function loadPopup(url, target) {
        $.ajax({
            url : url,
            method : "POST",
            //ADD form
            data : $('#frm_anadirEditarCobertura').serialize(),
            success : function(data) {
                $("#dialog").html(data);
            },
            error : function(data) {
                console.log('VALIDATE');

            }
        });

    }
</script>
...........

    <div id="dialog" title="Basic dialog"></div>

    <a class="botonModificar" href="javascript:modificarDivisaValor('${dv.id}')"></a>

    <form id="frm_anadirEditarCobertura" action="/popupOpen.do" method="post">
        <input id="idDivisaValor" type="hidden" name="idDivisaValor" value="" />
        ..
    </form>

这是在 de 对话框中加载的 JSP：

// JSP (crearModificarDivisaValor.jsp) Content loaded inside popup
    <script>
    ........
    ..
    function sendFormPopUp(idForm){

        var url = "/popupSave.do";

        $.ajax({
            url : url,
            method : "POST",
            //AÑADO EL FORMULARIO DE COBERTURA DE DIVISAS
            data : $(idForm).serialize(),
            success : function(data, status) {
        $("html").html('data');
    },
    statusCode: {
        //CONFLICT- ERROR EN LA VALIDACION
        409: function(data) {
            console.log('ERROR');           
            $("#dialog").html(data);
        }
    }
        });
    }
 </script>

<div id="anadirEditarDivisaValorContainer">
    <fieldset class='gris'  style="display:block">

    <form:errors path="divisaValor" cssClass="errormessage" element="div"/>

        <legend>Divisa valor</legend>
        <form id="frm_anadirEditarDivisaValor" action="" method="post">
            <input id="idDivisaValor" type="hidden" name="id" value="${divisaValor.id}" />
            <input type="hidden" name="coberturaDivisas.id" value="${idCoberturaDivisas}" />
            <table cellspacing="10px">
                     <tr>
                      <td>
                          <label style="width: 35px">Divisa</label>                                       
                      </td>
                      <td>
                        <select id="select_divisa" name="divisa.codigo" class="required" style="width: 190px">
                               <c:forEach var="d" items="${divisas}">
                                        <option value="${d.codigo}" ${d.codigo == divisaValor.divisa.codigo ? 'selected="selected"' : ''}>${d.nombreDivisa}</option>
                               </c:forEach>
                         </select>                    
                      </td>
                     </tr>
                     <tr>
                      <td>
                          <label style="width: 35px">Valor (%)</label>                                        
                      </td>
                      <td>
                            <input id ="input_valor" type=text style="width:35px" name="valor" value="${!empty divisaValor.valor ? divisaValor.valor : 0.00}"/> 
                            <form:errors path="divisaValor.valor" />
                      </td>
                     </tr>       
            </table>
        </form>
    </fieldset>
    <br>
    <div align="right" id="container">
            <a id="btnGuardarDV" href="javascript:sendFormPopUp('#frm_anadirEditarDivisaValor')"></a>
            <a id="btnCancelar" href="javascript:cerrarPopUp()"></a>    
    </div>
</div>

我正在尝试使用 ajax 发送对话框表单并使用 CONFLICT 状态标记响应以在对话框 div 中加载 html 数据，否则我想在所有页面中加载 html，但它不起作用。

有人知道这样做吗？

感谢您的帮助！

Answer 1

//解决方案

经过两天的思考，我找到了一个有效的方法。

我的解决方案是返回带有 ModelAttribute 的 JSP，如果有验证错误，如果一切正常，我返回一个带有嵌入表单的 JSP 并重定向到其他页面（刷新所有页面）。

我已经更改了我的 js 函数以发送弹出表单：

function sendFormPopUp(idForm){  
   var url = "/popupSave.do";

   $.ajax({ 
    url : url, 
    method : "POST",
    //AÑADO EL FORMULARIO DE COBERTURA DE DIVISAS 
    data : $(idForm).serialize(), 
    success : function(data, status) {
            $("#dialog").html(data);
    }
   });
}

我已经更换了控制器：

@RequestMapping(value = "/modificarDivisaValor.do")
protected ModelAndView modificarDivisaValor(@Valid DivisaValor divisaValor, BindingResult result, HttpServletRequest request,
        HttpServletResponse response) throws IOException, ServletException
{
    ModelAndView mav = new ModelAndView();

    if (result.hasErrors())
    {
        // Selector de divisas
        ArrayList<Divisa> divisas = new ArrayList<Divisa>(gestorDivisas.obtenerDivisas());
        request.setAttribute("divisas", divisas);

        // ObjectError error = new ObjectError("", "An account already exists for this email.");
        // result.addError(new ObjectError("divisaValor", "El nombre seleccionado ya existe"));

        mav.addObject("divisaValor", divisaValor);
        mav.setViewName("/ajax/mantenimiento/divisas/crearModificarDivisaValor");
    }
    else
    {
        gestorCoberturasDivisasPangea.modificarDivisaValor(divisaValor);

        String url = "/mantenimiento/divisas/iniciarModificarCoberturaDivisas.do";

        mav.addObject("url", url);
        mav.addObject("paramName", "idCoberturaDivisas");
        mav.addObject("paramValue", divisaValor.getCoberturaDivisas().getId());

        mav.setViewName("/ajax/confirmacion");

    }

    return mav;
}

我已经创建了带有重定向页面的确认 JSP：

<script type="text/javascript">
$(document).ready(function() {
    $("#dialog").dialog("close");
    console.log('${url}')
    $("#frm_confirm").submit()

});
</script>

<form id="frm_confirm" action="${url}" method="post">
    <input type="hidden" name="${paramName}" value="${paramValue}"/>
</form>

希望对其他人有用。

谢谢