复制工程

复制ssm02_CRUD 成ssm03_CRUD_ajax 创建新模块

Controller方法返回值类型Object （1）Controller方法返回类型可以有几种？

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

创建类似于之前的Info类

Controller方法返回Result对象

src\main\java\com\vission\bean\Result.java

package com.vission.bean; public class Result { private int code;//编码 404 200 private String msg;//提示信息 private Object 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; } //这个Init方法仅仅是因为老师觉得好用，虽然我并没有哪里看出来很方便。。。 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; } }

Controller方法返回Result

这个方法只带数据并非页面，先进入dept在进入listUI,通过listUI跳转如页面，进入页面会有静态方法加载再返回后台控制层从list方法中获取数据，以result对象形式传回页面 src\main\java\com\vission\Controller\DepartmentV2Controller.java

package com.vission.Controller; import com.vission.Service.DepartmentService; import com.vission.bean.Department; import com.vission.bean.Result; import org.slf4j.ILoggerFactory; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.ResponseBody; import javax.swing.*; import java.util.List; @Controller @RequestMapping("/deptv2") //写在类上面指定当前模块路径 public class DepartmentV2Controller { private static final Logger l = LoggerFactory.getLogger(DepartmentV2Controller.class); @Autowired private DepartmentService departmentService;//controller调用 service层 @RequestMapping(path="/listUI",method = RequestMethod.GET) public String listUI(){ return "/list_depts";//这个才是网页入口 } //这个方法只带数据并非页面，先进入dept在进入listUI,通过listUI跳转如页面 //进入页面会有静态方法再返回后台控制层从list方法中获取数据，以result对象形式传回页面 //地址上带UI表示打开页面，不带的表示返回数据 @RequestMapping(path="/list",method = RequestMethod.GET) public @ResponseBody //将list调jackson转成json字符串 Object list(){ //业务逻辑 调用查找所有的部门的方法 List<Department> list = departmentService.findAllDepartments(); System.out.println("V2"+list); return Result.init(200,"",list);//返回对象需要被转成json字符串 } @RequestMapping(path="/delete",method = RequestMethod.GET) public @ResponseBody Object delete(Integer did){ //获取did，执行对该条记录的删除 l.info("delete did="+did); try { departmentService.deletetDepartmentsByDid(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(String dname){ l.info("add department="+dname); Department dept = new Department(dname); System.out.println(dept); try { departmentService.saveDepartment(dept); return Result.init(200,"添加成功",null); } catch (Exception e) { e.printStackTrace(); } return Result.init(-200,"添加失败",null); } @RequestMapping(path = "/update", method = RequestMethod.POST) @ResponseBody Object update(Department dept){ // Department dept = new Department(did,dname); System.out.println("进入update"+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); } @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); } }

Ajax回顾

ajax是什么 Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML）ajax有什么特点 通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。什么是异步更新？ 即可以在不重新加载整个网页的情况下，对网页的某部分进行更新

上一个版本 使用重定向或者请求转发的，叫整体刷新 今天 使用ajax不需要重定向或者请求转发

请求转发：A向B发送请求，想让B帮忙完成一项工作，当B接收到请求后发现自己完成不了，于是B请C帮忙，C接收到B的请求后最终完成了该项工作，并把最后的结果返回给A。此过程A只发送了一次请求给B，A只知道把请求发给B，至于B是怎么完成的A并不关心，他只等待最终的结果。 重定向：A向B发送请求，想让B帮忙完成一项工作，当B接收到请求后发现自己无法完成，就立即告诉A情况，并向A推荐C可以完成该项工作，于是A就找C帮忙，C最终完成该项工作，返回给A。

请求转发的不同点：

浏览器地址栏显示不同（表面区别）： 无论进行多少次请求，如果使用请求转发来实现，浏览器地址栏中只显示第一次发送请求的地址； 如果使用重定向来实现，浏览器地址栏显示的是每次请求的新地址。这只是表面上看到的不同地方。

组件之间可否共享信息不同（本质区别） 请求转发：发送第一次到最后一次请求的过程中，WEB容器只创建一次request和response对象，请求之间始终共享这两个对象，所以每个请求可以访问他之前请求中的参数和属性的值； 重定向时:浏览器每发送一次请求，WEB容器都会重新创建新的request和response对象，所以请求之间不能共享信息，即不能在请求中访问到他之前请求中的参数和属性的值。

ajax具体编程内容

js 发送请求 js 接收结果 js 更新页面 Jquery实现Ajax

这俩脚本导入引入头标签内 <head> <!-- 引入--> <script type="text/javascript" src="${path}/js/jquery-1.11.0.min.js"></script> . . . </head> ajax传出接收数据 src\main\webapp\WEB-INF\jsp\list_depts.jsp <%@ 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}/deptv2/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}/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 数据类型 } $(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}/deptv2/add',data,function (result) { console.info(result) //页面切换 switchDiv(2) //重新加载列表 refreshTable() alert(result.msg) },'json') }) }) 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();// k1=v1&k2=v2 $.post('${path}/deptv2/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>

默认情况下点击超链接 是跳转页面-整体刷新 Ajax是局部刷新，点击链接调用函数，函数内部发起请求，处理返回结果，更新页面

属性display:none Ajax不切换页面，所有内容在一个页面，只需要通过style的属性display，将值设置为none不可见，不占高度。 如果需要显示出来，设置display的值为block

Ajax提交json给控制器方法

k1=v1&k2=v2 是由$(’#update_form’).serialize() 不是json {k1:v1,k2:v2}

（1）控制器方法

@RequestMapping(path = “/update2”, method = RequestMethod.POST,consumes = "application/json") public String update2(@RequestBody Department department)

（2）postman提交 （3）前台页面提交 $.ajax() contentType:“application/json;charset=UTF-8”, DepartmentV3Controller

@Controller @RequestMapping("/deptv3") public class DepartmentV3Controller { private static final Logger l = LoggerFactory.getLogger(DepartmentV3Controller.class); @Autowired IDepartmentService iDepartmentService; @RequestMapping(path="/addUI",method = RequestMethod.GET) public String addUI(){ return "add_dept"; } @RequestMapping(path="/add",method = RequestMethod.POST,consumes = "application/json") public @ResponseBody Object add(@RequestBody Department dept){//{did:0,dname:IOS} l.info("add dept="+dept); try { iDepartmentService.saveDepartment(dept); return Result.init(200,"添加成功",null); } catch (Exception e) { e.printStackTrace(); } return Result.init(-200,"添加失败",null); } }

add_dept.jsp

<%@ 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> <script type="text/javascript"> $(function () { $('#btn_add').click(function () { //js发送请求 var dname= $('#add_dname').val() console.info(dname) $.ajax({ url:'${path}/deptv3/add', async:true, data:'{"did":"","dname":"'+dname+'"}', type:"post", contentType:"application/json;charset=UTF-8", success:function (result) { //js接收结果 if(200==result.code){ alert(result.msg) //js更新页面 //刷新列表 } }, error:function () { alert('服务问题，请求失败') } }); }) }) </script> </head> <body> <div id="addDiv"> <h1>添加页面</h1> <form id="add_form" > <input type="hidden" name="did" id="add_did"/><br/> <input type="text" name="dname" id="add_dname"/><br/> <input id="btn_add" type="button" value="保存"/><br/> </form> </div> </body> </html>