Spring MVC 4和Thymeleaf-防止页面刷新


问题内容

我保证,我已经彻底解决了这个问题。

我有一个使用Thymeleaf收集表单数据并将其放入数据库的Spring MVC
4应用程序。效果很好,除了我希望我的应用程序在用户单击“提交”按钮之后将其留在表单页面上,以便他们可以继续进行编辑。

每次单击提交时,都会调用Controller并返回视图,这将刷新页面。我想消除刷新,并添加警报以确认保存。

因此,我开始着手将表单提交转换为AJAX,并意识到这将破坏使用Thymeleaf的目的。Thymeleaf已经将表单字段映射到支持bean,并且效果很好,那么为什么要替换该机制呢?

那么,有没有办法让Spring MVC控制器处理提交请求但不返回视图的新实例?

我尝试不返回视图,但这会导致错误,因为未将任何内容映射到model属性。我尝试使用@ResponseBody并返回数据,但这导致JSON在网页中呈现,而且我不知道如何获取该数据并对其进行处理。

我也试图找到一种挂接到提交按钮的方法,以尝试调用javascript preventDefault(),但是没有运气。

非常感谢您的建议…

这是我的控制器代码,非常简单:

@SessionAttributes("adminFormAjax")
@Controller
public class TestController 
{
    @Autowired
    private AdminDataRepository rep;

    @RequestMapping(value="/admin_ajax", method=RequestMethod.GET)
    public String adminFormAjax(Model model) 
    {
        AdminData ad = rep.findById(1L);

        // If there is no configuration record, create one and assign the primary key as 1.
        if(ad == null)
        {
            ad = new AdminData();
            ad.setId(1L);
        }

        model.addAttribute("adminFormAjax", ad);
        return "adminFormAjax";
    }

    @RequestMapping(value="/admin_ajax", method=RequestMethod.POST)
    public @ResponseBody AdminData adminSubmit(@ModelAttribute("adminFormAjax") AdminData ad, Model model) 
    {
        // rep.save(ad);
        model.addAttribute("adminFormAjax", ad);
        return ad;
    }

}

问题答案:

因此,如果您希望能够在不更改页面的情况下将表单数据提交给控制器,则thymeleaf会将页面呈现为HTML并将其发送给客户端以进行显示,则需要合并Javascript。

您绝对需要使用javascript / ajax发布表单内容并保持页面原样。

例如,如果您只想更新包含表单的部分,则可以调用控制器方法,该方法返回一个片段并显示包含相关表单信息的片段。