用户删除需要弹窗提示,用到了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"; } }