用户删除需要弹窗提示,用到了ajax请求Controller。老师写了查看、添加和修改的一半,剩下的让自己写。花了不少时间,找过很多文档。记录整理一下。
把多余的代码删除,直接粘贴到springboot中就运行就可以。
前端show.html页面,用的是Thymeleaf,ajax一开始遇到很多问题,最后改着改着就可以了。。。
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>th标签</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<!--用 ajax请求 controller遇到很多问题,但是改着改着就可以了。-->
<body>
<h1>查看页面(show页面)</h1>
<table border="1">
<tbody>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>操作</th>
</tr>
</tbody>
<tr th:each="emp,iter:${list}">
<td th:text="${emp.id}"></td>
<td th:text="${emp.name}"></td>
<td th:text="${emp.sex}"></td>
<td th:text="${emp.age}"></td>
<td><a th:href="@{showById(id=${emp.id})}">修改</a>
<a th:data-t_id="${emp.id}" th:object="${emp}" th:onclick = "'firm(this)'">删除</a></td>
<!-- th:object,这里要百度搜索 thymeleaf th标签-->
</tr>
</table>
</body>
<script type="text/javascript">
function firm(that){
if(confirm("确认删除?")) {
console.log(that.getAttribute('data-t_id'))
//window.location.href = "./show";
$.ajax({
//请求方式
type: "GET",
//请求的媒体类型
contentType: "application/json;charset=UTF-8",
//请求地址
// url: "http://localhost:9991/remove?id=22",
url: "http://localhost:9991/remove?id="+that.getAttribute('data-t_id'),
//数据,json字符串
//请求成功
success: function (result) {
console.log("请求成功")
window.location.href="http://localhost:9991/show"
console.log(result);
},
//请求失败,包含具体的错误信息
error: function (e) {
console.log("请求失败");
console.log(e);
}
});
}
}
</script>
</html>
后台Controller的代码:
package org.demo.controller;
import org.demo.dao.EmpDao;
import org.demo.pojo.Emp;
@Controller
public class EmpController {
//代表注入
@Resource
EmpDao empDao;
//spring boot 不能直接访问 template文件夹中的页面。请百度。
//执行方法 ”添加“
@PostMapping("add")
public String add(Emp emp){
empDao.add(emp);
return "redirect:/show"; //重定向到 show方法,然后再到 show 页面。
}
//执行方法 “查询”
@GetMapping("show")
public String show(Model model){
//执行show方法,“返回值”保存到 list中,传到show页面。
//笔记:访问localhost:9991/show.html没有数据。需要访问localhost:9991/show。
model.addAttribute("list",empDao.show());
return "show"; //return 到 show页面。
}
//执行方法showById
@GetMapping("showById")
public String showById(Model model,int id){
//获取dao的数据,保存到 emp,再把 emp 传给 set 页面。
model.addAttribute("emp",empDao.showById(id));
return "set"; //返回到一个 “set.html”页面
}
//执行 更新操作
@PostMapping("update")
public String update(Model model,Emp emp){
int res = empDao.update(emp);
System.out.println("更新:"+res);
return "redirect:/show";
}
//执行删除操作
@GetMapping("remove")
public String remove(int id){
//public String remove(int id){
int res = empDao.remove(id);
System.out.println("执行删除操作:id="+id);
return "redirect:/show";
}
}