Thymeleaf 结合SpringBoot 的 CRUD-员工列表（二）

CRUD-员工删除 -- 发送delete请求

• 我的前端页面展示如下：

• 我的html页面代码如下：

 

<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
					<h2><a class="btn btn-sm btn-success"  th:href="@{/emp}">员工添加</a></h2>
					<div class="table-responsive">
						<table class="table table-striped table-sm">
							<thead>
								<tr>
									<th>#</th>
									<th>lastName</th>
									<th>email</th>
									<th>gender</th>
									<th>department</th>
									<th>birth</th>
								</tr>
							</thead>
							<tbody>
								<!--遍历emps，取出的每个变量为emp-->
								<tr th:each="emp:${emps}">
									<td th:text="${emp.id}"></td>
									<td>[[${emp.lastName}]]</td>
									<td th:text="${emp.email}"></td>
									<td th:text="${emp.gender}==0?'女':'男'"></td>
									<td th:text="${emp.department.departmentName}"></td>
									<td th:text="${#dates.format(emp.birth, 'yyyy-MM-dd')}"></td>
									<td>
										<a class="btn btn-sm btn-primary" th:href="@{/emp/}+${emp.id}">编辑</a>
										<button th:attr="del_uri=@{/emp/}+${emp.id}" class="btn btn-sm btn-danger" id="delete_btn">删除</button>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</main>
				<form id="delete_form" method="post">
					<input type="hidden" name="_method" value="delete">
				</form>

• 遇到的问题分析：
• 当给删除按钮写自定义的属性 del_uri 时，thymeleaf不支持自定义属性
• 

通过查看Thymeleaf的官方文档，如下： 可以使用

th:attr

添加多个时，可以使用：

解决方案：

给删除按钮绑定 th:attr属性

<button th:attr="del_uri=@{/emp/}+${emp.id}" class="btn btn-sm btn-danger" id="delete_btn">删除</button>

• 为了发送delete请求，当点击删除按钮，可以将一个空的form表单提交，让其 携带 value = "delete"

<form id="delete_form" method="post">
			<input type="hidden" name="_method" value="delete">
</form>

• 同时，设置发送的响应的jquery事件

<!--点击删除按钮删除员工-->
		<script>
			$("#delete_btn").click(function () {
				//删除指定员工
				$("#delete_form").attr("action", $(this).attr("del_uri")).submit();
			});
		</script>

• 完成之后，可以来到页面，“删除” -> 右键 “检查”：
• 可以发现前后两次的对比：
• 第一次失败
• 
•  成功在下面：
•