ssm整合-实现对数据进行增删查改--含ajax普通前后台通信

使用ajax的前后端通信

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

3）依赖配置jackson库

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

Result （前后台通信工具类）

public class Result {
    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;
    }

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

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

Ajax回顾

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

Jquery实现Ajax

• （1）导入jquery库
  将库文件复到项目中
  在页面中引入库

DepartmentController

@Controller
@RequestMapping("/department")
public class DepartmentController {


    @Autowired
    IDepartmentService departmentService;
    private static  final Logger l = LoggerFactory.getLogger(DepartmentController.class);
    @RequestMapping(path = "/findAll",method = RequestMethod.GET)
    public @ResponseBody Object findAllDepartments(){
        try {
            List<Department> list=departmentService.findAll();
            System.out.println(Result.init(200,"查找成功",list));
            return Result.init(200,"查找成功",list);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return Result.init(400,"查找失败",null);
    }

    @RequestMapping(path = "/saveDepartment", method=RequestMethod.POST)
    public @ResponseBody
    Object save(Department department){
        System.out.println(department);
        try {

            if(department.getDname()!=null||"".equals(department.getDname())!=true){
                department=departmentService.saveDepartment(department);
                System.out.println(department);
                return Result.init(200,"添加成功",null);
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
        return Result.init(500,"添加失败",null);
    }
    @RequestMapping(path="/addUI",method = RequestMethod.GET)
    public String addUI(Model model){
        l.info("addUI ");

        List<Department> list=departmentService.findAll();
        l.info("list   depts="+list);
        model.addAttribute("depts",list);
        return "add_dept";
    }
    //updateUI?did=23
    //updateUI?did=23
    @RequestMapping(path = "/updateUI",method = RequestMethod.POST)
    public String updateUI(Integer did,Model model){
        l.info("updateUI did = "+did);
        Department department = departmentService.findDepartmentById(did);
        model.addAttribute("dept",department);
        return "update_dept";
    }

    //update
    @RequestMapping(path="/update",method = RequestMethod.POST)
    public @ResponseBody Object update(Department dept){
        //打印
        l.info("update  dept="+dept);
        //调用service
        try {
            departmentService.updateDepartmentById(dept);//
            return Result.init(200,"修改成功",null);
        } catch (Exception e) {
            e.printStackTrace();
        }
        //跳到查询页面
        return Result.init(400,"修改失败",null);
    }
    @RequestMapping(path="/delete",method = RequestMethod.GET)
    public String delete(int did){
        //打印
        l.info("update  dept="+did);
        //调用service
        departmentService.deleteDepartmentById(did);//
        //跳到查询页面
        return "list_depts";
    }
}

add_dept.jsp(添加部门实现页面）

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<%
    pageContext.setAttribute("path",request.getContextPath());
%>
<head>
    <title>添加部门</title>
    <script type="text/javascript" src="${path}/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">

    var add=function () {
        //alert('btn_add') 普通的表单提交 did=1&dname=测试组
        var data = $('#add_form').serialize() //方法会将表单数据拼接成k1=v1&k2=v2

        $.post('${path}/department/saveDepartment',data,function (result) {
            console.info(result)

            //页面切换
            if(200==result.code)
            {
                window.location="${path}/page/list_depts.jsp";
            }
            else
            {
                window.location="${path}/page/error.jsp";
            }
        },'json')
    };

</script>
</head>
<body>
<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"  onclick="add()" type="button" value="保存"/><br/>
    </form>
</div>

</body>
</html>

list_depts.jsp(展示页面，即全查页面，和删除页面)

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    pageContext.setAttribute("path",request.getContextPath());
%>
<html>
<head>
    <title>Title</title>
    <!-- 开始ajax编程  -->
    <script type="text/javascript" src="${path}/js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="${path}/js/jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#table').html('');
            $.get('${path}/department/findAll', 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="${path}/department/delete?did='+dept.did+'">删除</a><a href="${path}/department/updateUI?did='+dept.did+'">修改</a></td>\n' +
                            '\n' +
                            '    </tr>'
                    }//end for

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

            }, 'json')
        })
    </script>

</head>
<body>
<a href="${path}/department/addUI">添加数据</a>
<table id="table" border="1px" width="100%">

</table>
</body>
</html>

update_dept.jsp(实现update的页面)

<%@ page contentType="text/html;charset=UTF-8" language="java"  isELIgnored="false" %>
<%
    pageContext.setAttribute("path",request.getContextPath());
%>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="${path}/js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">

        function sumbit() {
            var data=$("#from").serialize();
            $.post('${pageContext.request.contextPath}/department/update',data,function (result) {
                alert(result.msg)
                //页面切换
                if(200==result.code)
                    window.location="${path}/page/list_depts.jsp";
                else
                    window.location="${path}/page/error.jsp";
            }, 'json')
        }
    </script>
</head>
<body>

<form id="from" method="post">
    <input type="hidden" name="did" value="${dept.did}" >
    <input type="text"  value="${dept.did}" disabled="disabled"/><br/>
    <input type="text" name="dname" value="${dept.dname}"/><br/>
    <input type="submit" onclick="sumbit()" value="保存修改"/><br/>
</form>

</body>
</html>