表单提交和javascript函数调用提交按钮点击在spring mvc

Form submit and javascript function calling on submit button click in spring mvc?

本文关键字：spring mvc 按钮 javascript 函数调用 提交 表单提交      更新时间：2023-09-26

在提交按钮单击事件上，我调用一个js函数来获取用户的输入并发送到服务器端进行处理。同时，我需要提交表格和所有填好的数据。我用<button type="button">代替<button type="submit">，因为当我把"type"作为提交时，它会得到错误。在那里，js的功能很好，但字段值不能通过控制器方法获取。

我怎么能做到只有一个按钮?这是我在控制器中的handler方法:

@RequestMapping(value = "/add_package")
    public
    @ResponseBody
    ModelAndView addPackage(@ModelAttribute("newPackage") Package newPackage,
                            HttpServletRequest request) {
        LOGGER.error("package objct {}",newPackage);// here I am getting objects with null values !!
        String s = request.getParameter("test");
        LOGGER.trace("test val = {}", s);
        ObjectMapper objectMapper = new ObjectMapper();
        List<Package> cats = null;
        String pkgName = newPackage.getPackName();
        try {
           ...
        } catch (Exception e) {
            ..
            LOGGER.error("error in package add {}", e.getMessage());
        }
        return new ModelAndView(new RedirectView("add"));
    }
下面是按钮的jsp代码: 
<form:button type="button" class="btn btn-success" id="btnAddNewPkg" onclick="contentPackge()"><span class="glyphicon glyphicon-plus"></span>

添加

我不认为你需要通过url作为https://localhost:8443/admin/packages/add_package，而只有/add_package就足够了。

此外，您可能还需要提供url-pattern

其次，对于ajax响应，我不确定为什么您再次需要ModelAndView。您可以探索redirect属性

如果你使用button="submit"，那么你需要使用event.preventDefault()来停止默认行为。我想使用button="button"会很好

你应该在ajax成功调用后提交表单，这是在ajax的成功函数中，你应该使用jquery.submit()函数手动提交表单，否则它将不起作用。因为它可能会破坏ajax的功能，或者您可以在单击提交按钮后使用时间延迟功能。

这是一种讨厌的方式，我更喜欢你在ajax成功中调用提交函数，并保持按钮类型为button

    $( "#target" ).submit(function( event ) {
    alert( "Handler for .submit() called." );
    event.preventDefault();showloadingif();
    setTimeout(function(){ $("#formId").submit(); }, 3000);         
});
相关文章：