java语言ajax请求Controller.

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

}


上一篇:java第一周学习内容(6)


下一篇:Java代码审计——Fastjson1.2.43反序列化漏洞