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

  • Z时代
  • 2024-01-10
  • 分类：问答

作为我之前有关使用Thymeleaf并防止页面刷新的问题的跟进：

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

td4029155.html

基本上，我有一个可以正常工作的Spring

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

我已经编写了一些Javascript以使用JQuery Ajax将数据发布到我的Spring MVC

Controller。诀窍似乎是不使用Submit按钮，而只是使用常规按钮，并绑定JS函数以将数据发送到服务器。

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

感谢您对这是否是实现此目标的正确方法的评论。

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

非常感谢。

这是表格的重要部分：

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

回答：

如此细分答案。

  1. Thymeleaf不是多余的，它仍将在发送给客户端之前呈现HTML页面。Ajax只是在客户端为您做进一步的处理。

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

$（“＃submitbutton”）。on（’click’，function（）{// do stuff}）;

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

  2. 您遇到的任何问题/错误都应通过在adminSubmit中的返回调用进行通讯，并在ajax中管理相关的客户端响应。

以上是 Thymeleaf页面刷新跟进-现在使用AJAX 的全部内容， 来源链接： utcz.com/qa/431918.html

回到顶部