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

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

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

每次单击submit时，都会调用控制器并返回视图，从而刷新页面。我想取消刷新，并添加一个警报以确认保存

因此，我开始将表单提交转换为AJAX，并意识到这将破坏使用Thymeleaf的目的。Thymeleaf已经将表单字段映射到了支持bean，并且做得很好，那么为什么要替换这种机制呢

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

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

我还试图找到一种方法来钩住submit按钮，尝试调用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发布表单内容并保持页面原样

---

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

希望这可以帮助未来的读者。我们可以使用th:replace来避免javascript/ajax。见下面的例子

@GetMapping("/admin-reload")
public String reloadElementDiv(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("adminAttrib", ad);

    return "adminForm";
}

现在，在父html（如home.html）中，您可以使用以下内容。 *这意味着用admin.html中id=“admin div”的元素替换此标记

<div th:replace="~{admin :: #admin-div}">
</div>

然后在一个单独的html文件中，放置片段html代码。 其中，在本例中为admin.html

<div id="admin-div">
   <span th:text="${ad.id}"></span>
</div>

您可以放置一个链接/按钮来触发以刷新div元素 通过使用th:href

<a href="" th:href="@{/admin-reload}"><span>Edit</span></a>

我使用rest控制器和ajax来处理这个问题

好的，谢谢，我试过了，但是当我点击提交按钮时，似乎无法调用javascript。Thymeleaf是否以某种方式拦截了submit按钮调用的函数？不，记住Thymeleaf是服务器端渲染。如果javascript不起作用，则与javascript代码有关。如果你想提出一个新问题，说明你遇到的问题（包括显示代码），我可以看一看