SSM——CRUD增删改查的详细使用（ajax技术）

---

---

一、项目准备

（1）界面展示

http://localhost:8080/ssm03/deptv2/listUI

（2）复制工程

【源代码：基础的增删改查（部门）】

在原有代码基础上，修改项目名称为ssm03_crud--ajax，添加新的技术手段，模块标签

（3）Controller方法返回值类型Object

• Controller方法返回类型可以有几种？
  ModelAndView
  void
  String
  Object
• @ResponseBody
  调jackson库将Object转成json字符串返回
  如果没有依赖jackson库则，抛出异常
  HttpMessageNotWritableException: No converter found for return value of type: class java.util.ArrayList
• 依赖配置jackson库

pom.xml

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

（4）Controller方法返回Result

• （src\main\java\com\smp\domain\Result.java）

public class Result {
    
    
    //编码 404 200
    private int code;
    //提示信息
    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;
    }
    public Result() {
    
    
    }

    public Result(int code, String msg, Object data) {
    
    
        this.code = code;
        this.msg = msg;
        this.data = data;
    }

    @Override
    public String toString() {
    
    
        return "Result{" +
                "code=" + code +
                ", msg='" + msg + '\'' +
                ", data=" + data +
                '}';
    }

    public int getCode() {
    
    
        return code;
    }

    public void setCode(int code) {
    
    
        this.code = code;
    }

    public String getMsg() {
    
    
        return msg;
    }

    public void setMsg(String msg) {
    
    
        this.msg = msg;
    }

    public Object getData() {
    
    
        return data;
    }

    public void setData(Object data) {
    
    
        this.data = data;
    }
}

• (src\main\java\com\smp\controller\DepartmentV2Controller.java)

@Controller
@RequestMapping("/deptv2")
public class DepartmentV2Controller {
    
    
    private static final Logger l= LoggerFactory.getLogger(DepartmentV2Controller.class);
    @Autowired
    //controller调用service层
    private IDepartmentService departmentService;
    /*@RequestMapping(path="/xx",method=  GET   POST代表请求页面)
     public 返回值类型 方法名(参数){ //页面提交过来的请求参数
        //..
        返回值类型决定返回给浏览器的内容
    }
     */
    //返回list界面
    @RequestMapping(path = "/listUI",method = RequestMethod.GET)
    public String listUI(){
    
    

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

二、ajax

（1） ajax介绍

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

（2）Jquery实现Ajax

• （1）导入jquery库
  【链接：jquery】
  

<%
    pageContext.setAttribute("path", request.getContextPath());
%>

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

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

三、增删改查

（1）实现部门列表界面

/*实现部门列表界面*/
        $(function () {
    
    
                //页面加载成功
                //1:js发送请求
                $.get('${path}/deptv2/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;
                        //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 数据类型


            })

（2）内容在同一页面

/*内容在同一页面*/
        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")
            }
        }
    <%--内容在同一页面结束--%>

（3）刷新界面

/*刷新界面*/
        function refreshTable() {
    
    
            //页面加载成功
            $('#table').html('')
            //1:js发送请求
            $.get('${path}/deptv2/list', function (result) {
    
    
                //2:js接收结果
                console.info("result=" + result)
                //定义表格的内容
                var trs = ''
                //拼接表头
                trs += ' <tr>\n' +
                    '        <td>编号</td>\n' +
                    '        <td>部门名称</td>\n' +
                    '        <td>管理</td>\n' +
                    '\n' +
                    '    </tr>'
                if (200 == result.code) {
    
    
                    var items = result.data;
                    //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 数据类型
        }
    <%--刷新界面结束--%>

（4）删除

• (src\main\java\com\smp\controller\DepartmentV2Controller.java)

//删除
    @RequestMapping(path = "/delete",method = RequestMethod.GET)
    public @ResponseBody Object delete(Integer did){
    
    
        //获取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);
    }
  

• （src\main\webapp\WEB-INF\pages\list_depts.jsp）

 /*删除指定id的部门*/
       function deleteById(did) {
    
    
            $.get('${path}/deptv2/delete?did=' + did, function (result) {
    
    
                console.info(result)
                if (200 == result.code) {
    
    
                    alert(result.msg)
                    //调用列表更新
                    refreshTable()
                } else {
    
    
                    alert(result.msg)
                }
            }, 'json')
        }

（5）添加

• (src\main\java\com\smp\controller\DepartmentV2Controller.java)

    //保存一般是使用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);
    }

• （src\main\webapp\WEB-INF\pages\list_depts.jsp）

/*添加请求*/
        $(function () {
    
    
            switchDiv(2)
            refreshTable()
            $('#btn_add').click(function () {
    
    
                //alter('btn_add')普通的表单提交
                var data = $('#add_form').serialize()
                $.post('${path}/deptv2/add', data, function (result) {
    
    
                    console.info(result)
                    //页面切换
                    switchDiv(2)
                    //重新加载列表
                    refreshTable()
                    alert(result.msg)
                }, 'json')
            })

        })
    <%--添加结束--%>

• 前台表单

<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" placeholder="请添加部门"/><br/>
        <input id="btn_add" type="button" value="保存"/><br/>
    </form>
</div>

（6）修改

• (src\main\java\com\smp\controller\DepartmentV2Controller.java)

    @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){
    
    
                //转成json返回界面
                return Result.init(200,null,dept);
            }
        }
        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);
    }

• （src\main\webapp\WEB-INF\pages\list_depts.jsp）

/*修改--回显代码*/
        function updateUI(did) {
    
    
            //alert(did)
            //显示修改页面
            switchDiv(3)
            //获取被修改的数据作回显
            $.get('${path}/deptv2/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();
            $.post('${path}/deptv2/update', data, function (result) {
    
    
                alert(result.msg)
                //切换页面
                switchDiv(2)
                //刷新列表
                refreshTable()
            }, 'json')
        }
    <%--修改结束--%>

• 前台表单

<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>