SSM整合与Ajax实现CRUD操作-优快云博客

本文链接：https://blog.youkuaiyun.com/mydreamljy/article/details/109371531

本文详细介绍了如何使用Ajax与SSM（Spring、SpringMVC、MyBatis）框架整合，实现CRUD操作。讲解了Ajax的基础概念、Jquery发送Ajax请求的方式，以及在Controller中处理Ajax请求的方法。内容包括Ajax的使用步骤、具体代码实现，包括pom.xml配置、Department实体类、Controller和前端jsp页面的jQuery代码，展示了如何在不刷新页面的情况下完成添加、删除、更新和查询部门信息。

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

回顾Ajax
1.ajax是什么
Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML）
2.ajax有什么特点
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。即可以在不重新加载整个网页的情况下，对网页的某部分进行更新
上一个版本使用重定向或者请求转发的，叫整体刷新
今天使用ajax不需要重定向或者请求转发
3.具体编程内容
js 发送请求
js 接收结果
js 更新页面

Jquery实现Ajax

在这里插入图片描述
1.导入jquery库
将库文件复到项目中在页面中引入库

<%
    pageContext.setAttribute("path",request.getContextPath());
%>
<head>
    <title>Title</title>
    <!-- 引入-->
    <script type="text/javascript" src="${path}/js/jquery-1.11.0.min.js"></script>
</head>

2.代码编写
js 发送请求 $.get $.post serialize()
js 接收结果 function(data){…}
js 更新页面 $(id值) html()

使用ajax实现SSM的CRUD

在Controller中对于@RequestMapping注解参数path的值，用两种区分，一种带后缀UI，一种不带。

地址后缀带UI的表示显示（打开）一个页面，只是做单纯的页面跳转，不访问数据库。
不带UI的是访问数据库，通过sql查询，然后通过jackson实现返回json格式的参数。
使用aJax进行增删查改的时候，是不需要切换页面的，所有的内容都在一个页面上，通过css设置style的属性display，将其值设置为none不可见（这种方式是不占页面空间的），需要显示的时候通过设置display为block显示出来。

主要代码

1.pom.xml需要fasterxml的依赖实现javabean对象与json数据之间转换

<dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>2.11.3</version>
    </dependency>

Msg返回信息类，通过创建静态init方法，以后直接通过Msg.init()方法使用就行，简化调用操作

//ajax返回提示信息类
public class Msg {
    private int code;   //返回编码（200正常、404未找到之类的）
    private String message; //返回提示信息
    private Object data;    //返回携带的数据

    //static静态方法，以后直接通过Msg.init()方法使用就行，简化
    public static Msg init(int code, String msg, Object data){
        Msg result =new Msg(code,msg,data);
        return result;
    }
    
    //省略get/set方法
}

Department

//部门
public class Department {
    private Integer did;
    private String dname;
    //省略get/set方法
}

2.DepartmentController

//版本2 - 使用ajax来CRUD
//地址带UI的表示显示（打开）一个页面，不带UI的是查询返回json格式数据
/*
一般修改操作都有回显界面（增加、删除、更新），查询不需要回显页面，就是新出一个页面供你更改数据
    回显就是两个方法，先查询显示，再修改（两个sql）
*/
@Controller
@RequestMapping("/deptv2")
public class DepartmentController {
    //slf4j日志
    private static  final Logger log = LoggerFactory.getLogger(DepartmentController.class);

    @Autowired
    private IDepartmentService departmentService;

//1. 查询显示所有部门
    //跳转显示所有部门信息页面【UI只做页面跳转】
    @RequestMapping(path = "/deptListUI",method = RequestMethod.GET)
    public String deptListUI(Model model){
        return "list_depts";
    }

    //不带UI，查询返回json数据
    //@ResponseBody注解，调用jackson库，将方法返回值转换为json字符串
    @RequestMapping(path="/deptList",method = {RequestMethod.GET})
    @ResponseBody
    public Object deptList(){
        //查询所有部门方法，返回json数据格式
        List<Department> allDepartments = departmentService.findAllDepartments();
        log.info("deptList 查询所有部门  " + allDepartments);
        return Msg.init(200,"",allDepartments);//返回数据
    }


//2. 新增保存部门
    @RequestMapping(path ="/saveDept",method = {RequestMethod.POST})
    @ResponseBody
    public Object saveDept(Department dept){
        log.info("saveDept 保存信息： dept="+dept);
        try {
            departmentService.saveDepartment(dept);
            return  Msg.init(200,"添加成功",null);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return  Msg.init(-200,"添加失败",null);
    }


//3. 通过id删除部门功能 前台拼接删除a标签地址要携带id，发送给后台，根据id进行删除部门
    @RequestMapping(path = "/deleteDept",method = RequestMethod.GET)
    @ResponseBody
    public Object deleteDept(Integer did){
        log.info("deleteDept 删除部门  did = "+did);
        try {
            //删除
            departmentService.deleteDepartmentById(did);
            //删除成功 返回200正确码
            return Msg.init(200,"删除did = "+did+"的部门成功",null);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return Msg.init(-200,"异常，删除失败",null);//出现异常
    }

//3. 通过id更新部门信息，需要先查询该id是否存在
    //通过id查询部门
    @RequestMapping(path = "/findDeptById", method = RequestMethod.GET)
    @ResponseBody
    public Object findDeptById(Integer did) {
        log.info("findDeptById 通过id查找部门 did=" + did);
        if (did != null) {
            //查询回显需要的数据，然后显示给更新页面赋值
            Department dept = departmentService.findDepartmentById(did);
            if (dept != null) {
                //将部门信息转成json返回页面，然后显示在更新回显页面上
                return Msg.init(200, null, dept);
            }
        }
        return Msg.init(-200, "没有查询到结果", null);
    }


    //进行更新操作
    @RequestMapping(path="/updateDept",method = RequestMethod.POST)
    @ResponseBody
    public Object updateDept(Department dept){
        //打印
        log.info("updateDept 更新信息： dept="+dept);
        try {
            departmentService.updateDepartmentById(dept);
            return Msg.init(200, "更新部门信息成功", null);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return Msg.init(-200, "异常，更新失败", null);

    }

}

3.list_depts.jsp前端html和jquery代码

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
        <html>
<head>
    <title>部门crud-ajax版本</title>

    <%-- 项目路径，简化${pageContext.request.contextPath}获取一长串 --%>
    <% pageContext.setAttribute("path",request.getContextPath());  %>

    <script type="text/javascript" src="${path}/js/jquery-1.11.0.min.js"></script>

    <%-- ajax实现 --%>
    <script type="text/javascript">

        //ajax所有操作都在一个页面，点击增加、编辑的时候需要显示/隐藏div
        function switchDiv(part) {
            //隐藏所有内容
            $('#addDiv').css("display","none")
            $('#listDiv').css("display","none")
            $('#editDiv').css("display","none")
            if(1 == part){
                //点击添加，将添加页面设置为block显示
                $('#addDiv').css("display","block")
                $('#add_dname').val('')
            }else if(2 == part){
                //显示所有的部门列表
                $('#listDiv').css("display","block")
            }else if(3 == part){
                //点击编辑，将编辑页面设置为block显示
                $('#editDiv').css("display","block")
            }
        }

        //页面加载成功执行
        $(function () {
            //显示部门列表display -> block
            switchDiv(2)
            //显示所有
            deptListUI()
            //点击增加
            $('#btn_add').click(function () {
                //alert('btn_add') 普通的表单提交 did=1&dname=测试组
                //serialize()方法表单序列化，会将表单数据拼接成k1=v1&k2=v2
                var data = $('#add_form').serialize()
                $.post('${path}/deptv2/saveDept',data,function (resultMsg) {
                    console.info(resultMsg)
                    //页面切换，隐藏所有，显示增加页面
                    switchDiv(2)
                    //重新加载列表
                    deptListUI()
                    //切换页面
                    switchDiv(2)
                    alert(resultMsg.message)
                },'json')
            })
        })

        //显示部门列表
        function deptListUI() {
            //1. js发送请求，通过调用方法访问数据库，获取json数据（部门信息列表）
            $.get('${path}/deptv2/deptList', function (resultMsg){
                //2. js接收数据，打印到浏览器的控制台（后台转json数据格式了）
                console.info("resultMsg = " + resultMsg)

            //定义表格table标签的内容（最外层用''单引号防止转移字符\）
                var trs = ''
                //拼接表头
                trs += ' <tr>\n' +
                    '        <th>序号</th>\n' +
                    '        <th>部门编号</th>\n' +
                    '        <th>部门名称</th>\n' +
                    '        <th>操作</th>\n' +
                    '\n' +
                    '    </tr>'
                //返回状态码200正常，拼接数据
                if (200 == resultMsg.code) {

                    var items = resultMsg.data;
                    //3. js循环获取数据更新页面
                    for (var i = 0; i < items.length;i++) {
                        var dept = items[i]
                        //打印到控制台，查看数据是否获取
                        console.info(dept)
                        //进行拼接数据
                        trs += ' <tr>\n' +
                            '        <td>' + (i + 1) + '</td>\n' +
                            '        <td>' + dept.did + '</td>\n' +
                            '        <td>' + dept.dname + '</td>\n' +
                            '        <td><a href="javascript:deleteDept('+dept.did+')">删除 | </a><a href="javascript:updateDeptUI('+dept.did+')">修改</a></td>\n' +
                            '\n' +
                            '    </tr>'
                    }
                    //通过html将数据拼接到table中
                    $('#table').html(trs)
                }
            },'json')
        }

        //通过id删除部门，要传递参数
        function deleteDept(did) {
            $.get('${path}/deptv2/deleteDept?did='+did,function (resultMsg) {
                console.info(resultMsg)
                if(200==resultMsg.code){
                    //显示删除结果
                    alert(resultMsg.message)
                    deptListUI()//调用列表更新
                }else{
                    alert(resultMsg.message)
                }
            },'json')
        }



        //更新回显页面，查询数据库，将查询的信息回显到该页面上
        function updateDeptUI(did) {
            //alert(did)
            //页面切换，显示修改页面
            switchDiv(3)
            //获取被修改的数据作回显
            $.get('${path}/deptv2/findDeptById?did='+did,function (resultMsg) {
                if(200==resultMsg.code){
                    var dept = resultMsg.data;
                    //{"code":200,"message":null,"data":{"did":1,"dname":"Java开发部"}}
                    //查到数据给更新页面赋值
                    $('#u_did1').val(dept.did)
                    $('#u_did2').val(dept.did)
                    $('#u_dname').val(dept.dname)
                }else{
                    alert(result.message)//提示没有查询结果
                }
            },'json')
        }

        //执行更新
        function updateDept() {
            var data=$('#update_form').serialize();// k1=v1&k2=v2
            $.post('${path}/deptv2/updateDept',data,function (resultMsg) {
                console.info(resultMsg)
                alert(resultMsg.message)
                //刷新列表
                deptListUI()
                //切换页面
                switchDiv(2)
            },'json')
        }

    </script>

</head>
<body>





<br/>
<div id="listDiv" style="display: block">
    <a href="javascript:switchDiv(1)">新增部门</a>
    <table border="1px" width="100%" id="table"></table>
</div>

<div id="addDiv">
    <h1>添加部门页面</h1>
    <form id="add_form"  >
        <input type="hidden" name="did"/><br/>
        <input type="text" name="dname" id="add_dname"/><br/>
        <input id="btn_add" type="button" value="保存"/><br/>
    </form>
</div>

<div id="editDiv">
    <%--更新回显页面--%>
    <h1>编辑页面</h1>
    <form id="update_form">
        <%-- disabled的数据表单提交是不会发送给后台的，设置一个隐藏域 --%>
        <input id="u_did1" type="hidden" name="did"  >
        <input id="u_did2" type="text"   disabled="disabled"/><br/>
        <input id="u_dname" type="text" name="dname" /><br/>
        <input id="btn_update" onclick="updateDept()" type="button" value="保存修改"/><br/>
    </form>
</div>

</body>
</html>

具体步骤

1.通过ajax实现显示所有部门信息
1.1 后台DepartmentController

//版本2 - 使用ajax来CRUD
//地址带UI的表示显示（打开）一个页面，不带UI的是查询返回json格式数据
/*
一般修改操作都有回显界面（增加、删除、更新），查询不需要回显页面，就是新出一个页面供你更改数据
    回显就是两个方法，先查询显示，再修改（两个sql）
*/
@Controller
@RequestMapping("/deptv2")
public class DepartmentController {
    //slf4j日志
    private static  final Logger log = LoggerFactory.getLogger(DepartmentController.class);

    @Autowired
    private IDepartmentService departmentService;

//1. 查询显示所有部门
    //跳转显示所有部门信息页面【UI只做页面跳转】
    @RequestMapping(path = "/deptListUI",method = RequestMethod.GET)
    public String deptListUI(Model model){
        return "list_depts";
    }

    //不带UI，查询返回json数据
    //@ResponseBody注解，调用jackson库，将方法返回值转换为json字符串
    @RequestMapping(path="/deptList",method = {RequestMethod.GET})
    @ResponseBody
    public Object deptList(){
        //查询所有部门方法，返回json数据格式
        List<Department> allDepartments = departmentService.findAllDepartments();
        log.info("deptList 查询所有部门  " + allDepartments);
        return Msg.init(200,"",allDepartments);//返回数据
    }
}

1.2 前端list_depts.jsp页面

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%
	//获取当前项目的路径
    pageContext.setAttribute("path",request.getContextPath());
%>
<head>
    <title>Title</title>
    <!-- 引入-->
    <script type="text/javascript" src="${path}/js/jquery-1.11.0.min.js"></script>
</head>

1.3 jQuery实现部门列表的展示

<%-- ajax实现 --%>
    <script type="text/javascript">

        //ajax所有操作都在一个页面，点击增加、编辑的时候需要显示/隐藏div
        function switchDiv(part) {
            //隐藏内容
            $('#addDiv').css("display","none")
            $('#listDiv').css("display","none")
            $('#editDiv').css("display","none")
            if(1 == part){
                //点击添加，将添加页面设置为block显示
                $('#addDiv').css("display","block")
                $('#add_dname').val('')
            }else if(2 == part){
                //显示所有的部门列表
                $('#listDiv').css("display","block")
            }else if(3 == part){
                //点击编辑，将编辑页面设置为block显示
                $('#editDiv').css("display","block")
            }
        }

        //页面加载成功执行
        $(function () {
            //1. js发送请求，通过调用方法访问数据库，获取json数据（部门信息列表）
            $.get('${path}/deptv2/deptList', function (resultMsg){
                //2. js接收数据，打印到浏览器的控制台（后台转json数据格式了）
                console.info("resultMsg = " + resultMsg)

            //定义表格table标签的内容（最外层用''单引号防止转移字符\）
                var trs = ''
                //拼接表头
                trs += ' <tr>\n' +
                    '        <th>序号</th>\n' +
                    '        <th>部门编号</th>\n' +
                    '        <th>部门名称</th>\n' +
                    '        <th>操作</th>\n' +
                    '\n' +
                    '    </tr>'
                //返回状态码200正常，拼接数据
                if (200 == resultMsg.code) {

                    var items = resultMsg.data;
                    //3. js循环获取数据更新页面
                    for (var i = 0; i < items.length;i++) {
                        var dept = items[i]
                        //打印到控制台，查看数据是否获取
                        console.info(dept)
                        //进行拼接数据
                        trs += ' <tr>\n' +
                            '        <td>' + (i + 1) + '</td>\n' +
                            '        <td>' + dept.did + '</td>\n' +
                            '        <td>' + dept.dname + '</td>\n' +
                            '        <td><a href="javascript:deleteDept('+dept.did+')">删除 | </a><a href="javascript:updateDeptUI('+dept.did+')">修改</a></td>\n' +
                            '\n' +
                            '    </tr>'
                    }
                    //通过html将数据拼接到table中
                    $('#table').html(trs)
                }
            },'json')
        })
    </script>

1.4html页面内容

<div id="listDiv" style="display: block">
    <a href="javascript:switchDiv(1)">新增部门</a>
    <table border="1px" width="100%" id="table"></table>
</div>

显示效果
在这里插入图片描述

增加操作
2.1 后台DepartmentController

//新增保存部门
    @RequestMapping(path ="/saveDept",method = {RequestMethod.POST})
    @ResponseBody
    public Object save(Department dept){
        log.info("saveDept 保存信息： dept="+dept);
        try {
            departmentService.saveDepartment(dept);
            return  Msg.init(200,"添加成功",null);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return  Msg.init(-200,"添加失败",null);
    }

2.2 前端list_depts.jsp页面

$('#btn_add').click(function () {
                //alert('btn_add') 普通的表单提交 did=1&dname=测试组
                //serialize()方法表单序列化，会将表单数据拼接成k1=v1&k2=v2
                var data = $('#add_form').serialize()
                $.post('${path}/deptv2/saveDept',data,function (resultMsg) {
                    console.info(resultMsg)
                    //页面切换，隐藏所有，显示增加页面
                    switchDiv(2)
                    //重新加载列表
                    deptListUI()
                    alert(result.msg)
                },'json')
            })

html内容

<div id="listDiv" style="display: block">
    <a href="javascript:switchDiv(1)">新增部门</a>
    <table border="1px" width="100%" id="table"></table>
</div>
<div id="addDiv">
    <h1>添加部门页面</h1>
    <form id="add_form"  >
        <input type="hidden" name="did"/><br/>
        <input type="text" name="dname" id="add_dname"/><br/>
        <input id="btn_add" type="button" value="保存"/><br/>
    </form>
</div>

3.删除操作通过id删除部门
3.1 后台DepartmentController

//删除部门功能 前台拼接删除a标签地址要携带id，发送给后台，根据id进行删除部门
    @RequestMapping(path = "/deleteDept",method = {RequestMethod.GET})
    public Object delete(Integer did){
        log.info("deleteDept 删除部门  did = "+did);
        try {
            //删除
            departmentService.deleteDepartmentById(did);
            //删除成功 返回200正确码
            return Msg.init(200,"删除成功",null);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return Msg.init(-200,"异常，删除失败",null);//出现异常
    }

3.2前端list_depts.jsp页面

//通过id删除部门，要传递参数
        function deleteDept(did) {
            $.get('${path}/deptv2/deleteDept?did='+did,function (resultMsg) {
                console.info(resultMsg)
                if(200==resultMsg.code){
                    //显示删除结果
                    alert(resultMsg.message)
                    deptListUI()//调用列表更新
                }else{
                    alert(resultMsg.message)
                }
            },'json')
        }

4.更新
4.1 后台DepartmentController

//3. 通过id更新部门信息，需要先查询该id是否存在
    //通过id查询部门
    @RequestMapping(path = "/findDeptById", method = RequestMethod.GET)
    @ResponseBody
    public Object findDeptById(Integer did) {
        log.info("findDeptById 通过id查找部门 did=" + did);
        if (did != null) {
            //查询回显需要的数据，然后显示给更新页面赋值
            Department dept = departmentService.findDepartmentById(did);
            if (dept != null) {
                //将部门信息转成json返回页面，然后显示在更新回显页面上
                return Msg.init(200, null, dept);
            }
        }
        return Msg.init(-200, "没有查询到结果", null);
    }

然后进行更新操作

 //进行更新操作
    @RequestMapping(path="/updateDept",method = RequestMethod.POST)
    @ResponseBody
    public Object updateDept(Department dept){
        //打印
        log.info("updateDept 更新信息： dept="+dept);
        try {
            departmentService.updateDepartmentById(dept);
            return Msg.init(200, "更新部门信息成功", null);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return Msg.init(-200, "异常，更新失败", null);

    }

4.2 前端list_depts.jsp页面
jquery更新回显页面

//更新回显页面，查询数据库，将查询的信息回显到该页面上
        function updateDeptUI(did) {
            //alert(did)
            //页面切换，显示修改页面
            switchDiv(3)
            //获取被修改的数据作回显
            $.get('${path}/deptv2/findDeptById?did='+did,function (resultMsg) {
                if(200==resultMsg.code){
                    var dept = resultMsg.data;
                    //{"code":200,"message":null,"data":{"did":1,"dname":"Java开发部"}}
                    //查到数据给更新页面赋值
                    $('#u_did1').val(dept.did)
                    $('#u_did2').val(dept.did)
                    $('#u_dname').val(dept.dname)
                }else{
                    alert(result.message)//提示没有查询结果
                }
            },'json')
        }

实现更新

 //执行更新
        function updateDept() {
            var data=$('#update_form').serialize();// k1=v1&k2=v2
            $.post('${path}/deptv2/updateDept',data,function (resultMsg) {
                console.info(resultMsg)
                alert(resultMsg.message)
                //刷新列表
                deptListUI()
                //切换页面
                switchDiv(2)
            },'json')
        }

html页面

<div id="editDiv">
    <%--更新回显页面--%>
    <h1>编辑页面</h1>
    <form id="update_form">
        <%-- disabled的数据表单提交是不会发送给后台的，设置一个隐藏域 --%>
        <input id="u_did1" type="hidden" name="did"  >
        <input id="u_did2" type="text"   disabled="disabled"/><br/>
        <input id="u_dname" type="text" name="dname" /><br/>
        <input id="btn_update" onclick="updateDept()" type="button" value="保存修改"/><br/>
    </form>
</div>