Spring MVC 4 和 Thymeleaf - 防止頁面刷新

Question

我保證，我已經用谷歌搜索過了。

我有一個 Spring MVC 4 應用程序，它使用 Thymeleaf 收集表單數據並將其放入數據庫。 效果很好，除了我希望我的應用程序在用戶點擊提交按鈕后將用戶留在表單頁面上，以便他們可以繼續編輯。

每次他們點擊提交時，都會調用控制器並返回視圖，這會導致頁面刷新。 我想消除刷新並添加警報以確認保存。

所以我開始致力於將表單提交轉換為 AJAX，並意識到這會違背使用 Thymeleaf 的目的。 Thymeleaf 已經將表單字段映射到支持 bean 並且做得很好，那么為什么要替換該機制呢？

那么，有沒有辦法讓 Spring MVC 控制器處理提交請求但不返回視圖的新實例？

我嘗試不返回視圖，但這導致了錯誤，因為沒有映射到模型屬性。 我嘗試使用 @ResponseBody 並返回數據，但這導致 JSON 在網頁中呈現，而且我無法弄清楚如何獲取該數據並對其進行處理。

我還試圖找到一種方法來掛鈎提交按鈕以嘗試調用 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;
    }

}

Answer 1

因此，thymeleaf 會將頁面呈現為 HTML 並將其發送到客戶端以顯示，如果您希望能夠將表單數據提交給控制器而不更改頁面，則需要合並 Javascript。

您肯定需要使用 javascript/ajax 來發布表單內容並保持頁面原樣。

例如，如果您只想更新包含表單的部分，您可以調用一個控制器方法，該方法返回一個片段並顯示包含相關表單信息的片段。

Answer 2

希望這可以幫助未來的讀者。 我們可以使用 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>

您可以使用 th:href 放置一個鏈接/按鈕來觸發刷新 div 元素

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

Answer 3

我使用rest控制器和ajax來處理這個問題