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

Question

我保证，我已经用谷歌搜索过了。

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

每次他们单击提交时，都会调用 Controller 并返回 View ，这会导致页面刷新。我想取消刷新并添加一个警报以确认保存。

所以我开始致力于将表单提交转换为 AJAX，并意识到这会破坏使用 Thymeleaf 的目的。 Thymeleaf 已经将表单字段映射到支持 bean 并且做得很好，那么为什么要替换该机制？

那么，有没有办法让 Spring MVC Controller 处理提交请求但不返回 View 的新实例？

我尝试不返回 View ，但这导致了错误，因为没有任何内容映射到模型属性。我尝试使用 @ResponseBody 并返回数据，但这导致 JSON 在网页中呈现，而且我无法弄清楚如何获取该数据并对其进行处理。

我还试图找到一种方法来 Hook 提交按钮以尝试调用 javascript preventDefault() 但在那里没有任何运气。

非常感谢您的建议...

这是我的 Controller 代码，非常简单:

@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;
    }

}

Answer 1

因此 thymeleaf 会将页面渲染为 HTML 并将其发送给客户端显示，如果您希望能够在不更改页面的情况下将表单数据提交给 Controller ，则需要合并 Javascript。

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

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