java语言ajax请求Controller._java ajax control-优快云博客

本文链接：https://blog.youkuaiyun.com/fghfghhgjgj/article/details/123202284

本文记录了在Java SpringBoot应用中使用Ajax进行用户删除操作的实践过程。在前端Thymeleaf页面通过Ajax发送请求，后端Controller接收并处理请求，实现了弹窗提示的用户删除功能。在实现过程中遇到了一些问题，但经过调试和查阅文档最终成功解决。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

}