Thymeleaf 页面刷新跟进 - 现在使用 AJAX

Question

作为我之前关于使用 Thymeleaf 和防止页面刷新的问题的后续：

http://forum.thymeleaf.org/Preventing-page-refresh-Thymeleaf-amp-Spring-MVC-td4029155.html

基本上我有一个可用的 Spring MVC 应用程序，它使用 Thymeleaf 来保存表单数据。当用户保存数据时，页面会刷新（因为我想将它们留在页面上进行更多编辑）并且我想消除页面刷新。

我编写了一些 Javascript 以使用 JQuery Ajax 将数据发布到我的 Spring MVC 控制器。诀窍似乎是不使用提交按钮，只使用常规按钮并绑定一个 JS 函数以将数据发送到服务器。

这一切似乎都很完美，但我想确保我了解正在发生的事情。我特别想知道 Thymeleaf 现在是否是多余的。我不认为这是因为当我最初加载页面时，Thymeleaf 仍然绑定到数据 bean。通过在控制器中使用服务器端的调试器，看起来 post 请求调用映射的方法并将数据传递给模型。

我很感激您对这是否是实现这一目标的正确方法的评论。

最后，我如何处理错误，例如存储库因任何原因无法持久保存数据？

非常感谢。

以下是表格的重要部分：

<FORM id="adminDataForm" action="#" th:action="@{/admin_ajax}" th:object="${adminFormAjax}" method="post">


<input type="button" value="Save Changes" id="post" onClick="sendData()" />

这是Javascript：

function sendData()
{
        $.ajax(
        {
            type: "POST",
            data: $("#adminDataForm").serialize(),
            cache: false,
            url: "/admin_ajax",
            success: function(data) 
            {
                alert("Your changes have been saved");
            },
            error: function()
            {
                alert("Error - Data not saved");
            }

        });
}

这是控制器：

@SessionAttributes("adminFormAjax")
@Controller
public class TestController 
{
    final static protected long INDEX_RA = 2L;

    @Autowired
    private AdminDataRepository rep;

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

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

        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

所以答案细分。

1. Thymeleaf 不是多余的，它仍然会在发送到客户端之前渲染 HTML 页面。Ajax 只是在客户端为您进行进一步的处理。

2. 您也可以使用提交按钮，您只需要确保您的表单结构正确，并且您有 javascript 监听您的提交按钮点击，例如

   $("#submitbutton").on('click', function (){//do stuff});

3. 您可以像使用标准控制器一样处理 Ajax 控制器中的所有异常/问题。您需要将不同级别的问题处理分开。例如，存储库级别的问题应在代表级别进行管理，控制器/pojo 应在控制器级别（或 pojo，如果您使用控制器级别进行处理）。您还应该通过全局媒介（例如 ControllerAdvice）捕获任何异常。

4. 您发现的任何问题/错误都应该通过 adminSubmit 中的回拨进行通信，并在 ajax 中管理相关的客户端响应。