使用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~