使用thymeleaf與jquery實現頁面的局部刷新(以顯示學校的係爲例)

假設有這麼一個需求，我們需要在前端展示當前學校有多少個系。這個系的數據不能寫死，因爲後面可能隨時會修改或者增加系的信息,而寫死後每次修改系信息後就要回來修改前端代碼，這是很麻煩的。這一篇博客就來記錄一下怎麼操作。

---

有個思路就是後端寫好接口，用來查詢數據庫獲取當前的所有系後，存儲到request域中。然後前端每次訪問該頁面都請求一次該接口，得到數據後遍歷並填充到下拉表單中(select).

這裏service和dao的代碼略過了，就是查詢數據庫並返回，po出controller的代碼:

controller:

    //遍歷所有部門，將結果保存到request域中
    @GetMapping("/get")
    public String getAllDepartment(HttpServletRequest request){
        List<Department> allDepartment = departmentService.getAllDepartment();

        request.setAttribute("allDepartment",allDepartment);

		//demo是html頁面的名字，department是表示你要刷新到哪個區域,th:fragment='department'
        return "demo::department";
    }

html代碼：

<form>
	<!--th:fragment="department"標記一下該區域爲要刷新請求的區域,這個區域的id爲department-->
    <div id="department" th:fragment="department">
    <select>
    <!--遍歷request域中的數據，並填充到下拉表單中-->
        <option th:each="department:${allDepartment}" th:value="${department['department_id']}" th:text="${department['department_name']}"></option>
    </select>
    </div>
</form>

jquery的代碼:

    <script src="webjars/jquery/3.5.1/jquery.min.js"></script>

    <script>
		//頁面加載時調用函數
        $(function () {
        	//發送請求到對應請求路徑
            $('#department').load("/department/get");
        })
    </script>

運行結果:

並且每一個選項都有對應的id值:

bingo~