day2.2.5.基于ssm的ajax增删查改操作

最新推荐文章于 2023-08-07 10:31:01 发布

暮夏秋风

最新推荐文章于 2023-08-07 10:31:01 发布

阅读量605

点赞数

分类专栏：基地实训文章标签： spring springmvc mybatis ajax idea

本文链接：https://blog.youkuaiyun.com/lcw19990424/article/details/109277982

版权

基地实训专栏收录该内容

19 篇文章

订阅专栏

idea ssm框架搭建

基于ssm的增删查改操作

准备：

复制工程模块：
复制前面模块。
修改父工程pom.xml，modules中添加ssm_env_crud_ajax
修改当前工程pom.xml

artifactId：ssm_env_crud_ajax
name：ssm_env_crud_ajax Maven Webapp

在这里插入图片描述

分析：

和普通crud模块的不同点

前面页面给服务器发送请求，服务器将响应数据封装在Model中，页面从Model中取值。现在直接转成JSON对象，页面从JSON对象中取值。
以前页面全局刷新，现在局部刷新。

相同点：

service层及其下层代码相同。

总结：

也就是在前面模块代码的基础上修改下页面请求方式为ajax请求，controller层返回数据类型为JSON对象就性。

实现：

项目工程目录：

在这里插入图片描述

Result

用于封装响应结果数据：

public class Result {
    private int code;//编码 404 200
    private String msg;//提示信息
    private Object data; //数据

    public static Result init(int code, String msg, Object data) {
        Result result = new Result(code, msg, data);
        return result;
    }

    private Result() {
    }

    private Result(int code, String msg, Object data) {
        this.code = code;
        this.msg = msg;
        this.data = data;
    }
    set&get方法
}

DepartmentController层

接受ajax请求。
处理请求。
返回JSON对象。

@Controller
@RequestMapping("/dept") //写在类上面指定当前模块路径
public class DepartmentController {
    private static final Logger l = LoggerFactory.getLogger(DepartmentController.class);
    @Autowired
    private IDepartmentService departmentService;//controller调用 service层
    /*@RequestMapping(path="/xx")
     public 返回值类型 方法名(参数){ //页面提交过来的请求参数
        //..
        返回值类型决定返回给浏览器的内容
    }
     */
    @RequestMapping(path="/listUI",method = RequestMethod.GET)
    public String listUI(){

        return "list_depts";
    }

    //地址上带UI表示打开页面，不带的表示返回数据
    @RequestMapping(path="/list",method = RequestMethod.GET/*只支持数据格式为JSON的请求*/)
    //将list调jackson转成json字符串
    public @ResponseBody Object list(){
        //业务逻辑 调用查找所有的部门的方法
        List<Department> list =  departmentService.findAllDepartments();
        return Result.init(200,"",list);//返回对象需要被转成json字符串
    }

    @RequestMapping(path="/delete",method = RequestMethod.GET)
    public @ResponseBody  Object delete(Integer did){//Integer did=1
        //获取did，执行对该条记录的删除
        l.info("delete did="+did);
        try {
            departmentService.deleteDepartmentById(did);
            return Result.init(200,"删除成功",null);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return Result.init(-200,"删除失败",null);
    }

    //保存一般是使用post提交
    @RequestMapping(path="/add",method = RequestMethod.POST)
    public @ResponseBody Object add(Department dept){
        l.info("add department="+dept);
        try {
            departmentService.saveDepartment(dept);
            return  Result.init(200,"添加成功",null);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return  Result.init(-200,"添加失败",null);
    }

    @RequestMapping(path = "/find", method = RequestMethod.GET)
    public @ResponseBody
    Object find(Integer did) {
        l.info("find did=" + did);//打数据
        if (did != null) {
            Department dept = departmentService.findDepartmentById(did);//查询回显需要的数据
            if (dept != null) {
                return Result.init(200, null, dept);//转成json返回页面
            }
        }
        return Result.init(-200, "没有查询结果", null);
    }
    @RequestMapping(path = "/update", method = RequestMethod.POST)
    @ResponseBody
    Object update(Department dept){
        l.info("update dept="+dept);
        try {
            departmentService.updateDepartmentById(dept);
            return Result.init(200, "更新成功", null);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return Result.init(-200, "更新失败", null);
    }
}

ResponseBody需要导入jackson依赖

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

上序步骤操作完后，如果还出现问题
在这里插入图片描述

解决， 可能是Result类中忽略了写set&get方法

list_depts.jsp页面

将展示，增加，修改页面全部集合在一个页面，通过控制display属性来调节显示
- 1，向后端发送Ajax请求。
- 2，接受响应数据。
- 3，根据返回数据更新页面。

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>

<html>
<%
    pageContext.setAttribute("path", request.getContextPath());
%>
<head>
    <title>Title</title>
    <!-- 引入-->
    <script type="text/javascript" src="${path}/js/jquery-1.11.0.min.js"></script>
    <!-- 开始ajax编程  -->
    <script type="text/javascript">
        function deleteById(did) {
            $.get('${path}/dept/delete?did='+did,function (result) {
                console.info(result)
                if(200==result.code){
                    alert(result.msg)
                    refreshTable()//调用列表更新
                }else{
                    alert(result.msg)
                }
            },'json')
        }
        function switchDiv(part) {
            //隐藏内容
            $('#addDiv').css("display","none")
            $('#listDiv').css("display","none")
            $('#editDiv').css("display","none")
            if(1 == part){//添加页面
                $('#addDiv').css("display","block")
                $('#add_dname').val('')
            }else if(2 == part){//列表页面
                $('#listDiv').css("display","block")
            }else if(3 == part){//编辑页面
                $('#editDiv').css("display","block")
            }

        }
        function refreshTable(){
            //页面加载成功
            $('#table').html('')
            //1:js发送请求
            $.get('${path}/dept/list', function (result) {
                //2:js接收结果
                console.info("result=" + result)
                //{"code":200,"msg":"","data":[{"did":1,"dname":"JAVA"},{"did":2,"dname":"测试"},{"did":3,"dname":"最牛部门33"}]}

                //定义表格的内容
                var trs = ''
                //拼接表头
                trs += ' <tr>\n' +
                    '        <td>编号</td>\n' +
                    '        <td>部门名称</td>\n' +
                    '        <td>管理</td>\n' +
                    '\n' +
                    '    </tr>'
                if (200 == result.code) {
                    var items = result.data;
                    alert(items)
                    //3:js更新页面
                    for (var i = 0; i < items.length; i++) {
                        var dept = items[i]
                        console.info(dept)
                        trs += ' <tr>\n' +
                            '        <td>' + dept.did + '</td>\n' +
                            '        <td>' + dept.dname + '</td>\n' +
                            '        <td><a href="javascript:deleteById('+dept.did+')">删除 | </a><a href="javascript:updateUI('+dept.did+')">修改</a></td>\n' +
                            '\n' +
                            '    </tr>'
                    }//end for

                    $('#table').html(trs)
                }

            }, 'json')  //参1 地址 参2 处理函数  参3 数据类型


        }
        $(function () {
            switchDiv(2)
            refreshTable()
            $('#btn_add').click(function () {
                //alert('btn_add') 普通的表单提交 did=1&dname=测试组
                var data = $('#add_form').serialize() //方法会将表单数据拼接成k1=v1&k2=v2
                $.post('${path}/dept/add',data,function (result) {
                    console.info(result)
                    //页面切换
                    switchDiv(2)
                    //重新加载列表
                    refreshTable()
                    alert(result.msg)


                },'json')
            })
        })
        function updateUI(did) {
            //alert(did)
            //显示修改页面
            switchDiv(3)
            //获取被修改的数据作回显
            $.get('${path}/dept/find?did='+did,function (result) {
                if(200==result.code){
                    var dept = result.data;
                    //{"code":200,"msg":null,"data":{"did":9,"dname":"测试部门3"}}
                    $('#u_did1').val(dept.did)
                    $('#u_did2').val(dept.did)
                    $('#u_dname').val(dept.dname)
                }else{
                    alert(result.msg)//提示没有查询结果
                }
            },'json')
        }
        function update() {
            var data=$('#update_form').serialize();// k1=v1&k2=v2
            $.post('${path}/dept/update',data,function (result) {
                alert(result.msg)
                //切换页面
                switchDiv(2)
                //刷新列表
                refreshTable()
            },'json')
        }
    </script>
</head>
<body>
<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">
        <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="update()" type="button" value="保存修改"/><br/>
    </form>
</div>

</body>
</html>