文章目录

一、项目准备（1）界面展示（2）复制工程（3）Controller方法返回值类型Object（4）Controller方法返回Result 二、ajax（1） ajax介绍（2）Jquery实现Ajax 三、增删改查（1）实现部门列表界面（2）内容在同一页面（3）刷新界面（4）删除（5）添加（6）修改

---

---

一、项目准备

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