Javascript Thymeleaf页面刷新后续-现在使用AJAX

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

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

我编写了一些Javascript，使用jQueryAjax将数据发布到我的SpringMVC控制器。诀窍似乎是不使用submit按钮，只使用常规按钮并绑定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()" />

这是控制器：

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

}

---

所以答案的分类

Thymeleaf不是冗余的，它在发送到客户端之前仍然会呈现HTML页面。Ajax只是在客户端为您做进一步的处理

你也可以使用submit按钮，你只需要确保你的表单结构正确，并且你有javascript监听你的submit按钮点击

$（“#提交按钮”）.on（'click'，function（）{//do stuff}）

您可以像处理标准控制器一样处理Ajax控制器中的任何和所有异常/问题。您需要在不同级别上分离问题处理。e、 g.响应级别的问题应在代表级别进行管理，控制器/pojo应在控制器级别（或pojo，如果您使用其中一个进行处理）。您还应该通过全局媒体（例如ControllerAdvice）捕获任何异常

您发现的任何问题/错误都应该通过adminSubmit中的返回调用进行反馈，并在ajax中管理相关的客户端响应

---

谢谢，这对我帮助很大。

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

}