jQuery結合Thymeleaf模板中的fragment標簽實現Ajax異步加載數據

前端頁面

一、首先、在需要異步刷新的div上面定義fragment片段

<div th:fragment="fragmentSegment">
     需要異步刷新的div
</div>

二、主動加載數據

<script type="text/javascript" th:inline="javascript">
    // 異步刷新
    $(function () {
        $("#comment-container").load(/*[[@{/服務器的請求地址}]]*/"");
    });

</script>

三、被動加載——寫成一個函數

<script type="text/javascript" th:inline="javascript">
    function postData() {
        $("#fragmentSegment").load(/*[[@{/服務器請求地址}]]*/"", {
            // 可攜帶參數
        }, function (responseTxt, statusTxt, xhr) {
            // 回調函數
        });
    }
</script>

后台

Controller層

@Controller
public class getDataController {
    
    @PostMapping("/請求url")
    public String getData() {
        return "路徑/頁面名稱 :: 當前頁面的fragment片段名稱";
    }
}