弹簧控制器调用表单提交

时间:2017-06-02 23:55:39

标签: javascript jquery ajax jsp spring-mvc

我是初学者,面对Spring mvc和ajax的以下问题。 我的jsp页面中有一个包含数量字段的行表。 最初的行为是每当用户更新数量字段并从字段中跳出时,提交的jsp表单仅包含焦点行中的值。表单操作绑定到控制器方法。因此,通过控制器方法显示表单提交上的错误或成功。此控制器方法具有所选行的请求参数。

因此,实质上一次只验证了一行。

jsp页面上有一个更新按钮。现在要求在更新按钮单击时立即验证所有行。 因此,应立即显示所有错误/成功消息。

点击按钮,我循环浏览所有数量字段,并通过ajax提交表单。所有值都正确更新。但是,控制器显示的错误/成功消息不再显示。

jsp页面 - form with action = update,method = post。 输入 - 数量和选定的行。

Controller - Method - 使用所选行的请求参数请求映射到上述操作。 - 显示错误/成功消息。 - 更新有效输入的数量。 - 最后重定向到同一页面

javascript - 在更新按钮上单击 - 对于每个传递行索引和数量的数量字段并通过ajax post提交表单.ajax成功和错误方法当前是空的,因为我期望通过控制器显示错误。 如果我执行form.submit而不是ajax,它只更新最后一行。

我不想打扰控制器的现有功能,因为它可能在其他页面中使用。 请建议。

JSP
….
//table with prd_qty input field
 <button type="submit" id="updateButton">Update</button>
….. . .
 <form action=“../update” id=“updateQtyForm” autocomplete="off" method="post">
     <input type="hidden" name="selectedRow"/>
     <input type="hidden" name=“qty”/>
 </form>
Controller
@RequestMapping(value = "/update", method = RequestMethod.POST)
    public String updateQty(@RequestParam(“selectedRow”) final long selectedRow, final Model model,@Valid final UpdateQtyForm form, final BindingResult bindingResult, final HttpServletRequest request, final RedirectAttributes redirectModel) throws Exception{
    //validation and displays error messages based on bindingResult
    return “/products”
}
@RequestMapping(value = "/products",  method = { RequestMethod.GET, RequestMethod.POST })
    public String showProducts(final Model model) throws Exception
    {..return <same page>;}
Script
$('#updateButton').click(function(e) {
    var form=$(“#updateQtyForm");
    var data;
    $('input[id^=“prd_qty"]').each(function() {
        var index=$(this).attr("id").split("_")[1];         
        var qty=$(this).val();  
        form.find('input[name=selectedRow]').val(index);
        form.find('input[name=qty]’).val(qty);          
         data =  $.ajax({
                url     : form.attr("action"),
                type    : form.attr("method"),
                data    : form.serialize(),
                success : function ( data ) {   },
                error   : function (  ) { }
            }) 
});

0 个答案:

没有答案