2.1 通过ajax实现显示所有部门信息
2.2 增加操作
2.3 删除操作 通过id删除部门
2.4 更新操作(通过id更新)
1.1 环境
1.2 DepartmentController
1.3 list_depts.jsp前端html和jquery代码
SSM的CRUD,使用ajax实现
1. 主要代码(模板)
2. 具体步骤
3. 源码下载
基本信息介绍
版本2 - 使用ajax来进行CRUD。
在Controller
中对于@RequestMapping
注解参数path的值,用两种区分,一种带后缀UI,一种不带。
地址后缀带UI的表示显示(打开)一个页面,只是做单纯的页面跳转,不访问数据库。
不带UI的是访问数据库,通过sql查询,然后通过jackson实现返回json格式的参数。
使用aJax进行增删查改的时候,是不需要切换页面的,所有的内容都在一个页面上,通过css设置style的属性display,将其值设置为none不可见(这种方式是不占页面空间的),需要显示的时候通过设置display为block显示出来。
可以用一下方法实现:
最终效果:
pom.xml
需要fasterxml的依赖实现javabean对象与json数据之间转换。
<dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-databind</artifactId> <version>2.11.3</version> </dependency>12345
Msg
返回信息类,通过创建静态init方法,以后直接通过Msg.init()方法使用就行,简化调用操作
//ajax返回提示信息类public class Msg { private int code; //返回编码(200正常、404未找到之类的) private String message; //返回提示信息 private Object data; //返回携带的数据 //static静态方法,以后直接通过Msg.init()方法使用就行,简化 public static Msg init(int code, String msg, Object data){ Msg result =new Msg(code,msg,data); return result; } //省略get/set方法}1234567891011121314
Department
//部门public class Department { private Integer did; private String dname; //省略get/set方法}123456
//版本2 - 使用ajax来CRUD//地址带UI的表示显示(打开)一个页面,不带UI的是查询返回json格式数据/* 一般修改操作都有回显界面(增加、删除、更新),查询不需要回显页面,就是新出一个页面供你更改数据 回显就是两个方法,先查询显示,再修改(两个sql) */@Controller@RequestMapping("/deptv2")public class DepartmentController { //slf4j日志 private static final Logger log = LoggerFactory.getLogger(DepartmentController.class); @Autowired private IDepartmentService departmentService;//1. 查询显示所有部门 //跳转显示所有部门信息页面【UI只做页面跳转】 @RequestMapping(path = "/deptListUI",method = RequestMethod.GET) public String deptListUI(Model model){ return "list_depts"; } //不带UI,查询返回json数据 //@ResponseBody注解,调用jackson库,将方法返回值转换为json字符串 @RequestMapping(path="/deptList",method = {RequestMethod.GET}) @ResponseBody public Object deptList(){ //查询所有部门方法,返回json数据格式 List<Department> allDepartments = departmentService.findAllDepartments(); log.info("deptList 查询所有部门 " + allDepartments); return Msg.init(200,"",allDepartments);//返回数据 }//2. 新增保存部门 @RequestMapping(path ="/saveDept",method = {RequestMethod.POST}) @ResponseBody public Object saveDept(Department dept){ log.info("saveDept 保存信息: dept="+dept); try { departmentService.saveDepartment(dept); return Msg.init(200,"添加成功",null); } catch (Exception e) { e.printStackTrace(); } return Msg.init(-200,"添加失败",null); }//3. 通过id删除部门功能 前台拼接删除a标签地址要携带id,发送给后台,根据id进行删除部门 @RequestMapping(path = "/deleteDept",method = RequestMethod.GET) @ResponseBody public Object deleteDept(Integer did){ log.info("deleteDept 删除部门 did = "+did); try { //删除 departmentService.deleteDepartmentById(did); //删除成功 返回200正确码 return Msg.init(200,"删除did = "+did+"的部门成功",null); } catch (Exception e) { e.printStackTrace(); } return Msg.init(-200,"异常,删除失败",null);//出现异常 }//3. 通过id更新部门信息,需要先查询该id是否存在 //通过id查询部门 @RequestMapping(path = "/findDeptById", method = RequestMethod.GET) @ResponseBody public Object findDeptById(Integer did) { log.info("findDeptById 通过id查找部门 did=" + did); if (did != null) { //查询回显需要的数据,然后显示给更新页面赋值 Department dept = departmentService.findDepartmentById(did); if (dept != null) { //将部门信息转成json返回页面,然后显示在更新回显页面上 return Msg.init(200, null, dept); } } return Msg.init(-200, "没有查询到结果", null); } //进行更新操作 @RequestMapping(path="/updateDept",method = RequestMethod.POST) @ResponseBody public Object updateDept(Department dept){ //打印 log.info("updateDept 更新信息: dept="+dept); try { departmentService.updateDepartmentById(dept); return Msg.init(200, "更新部门信息成功", null); } catch (Exception e) { e.printStackTrace(); } return Msg.init(-200, "异常,更新失败", null); }}123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <html><head> <title>部门crud-ajax版本</title> <%-- 项目路径,简化${pageContext.request.contextPath}获取一长串 --%> <% pageContext.setAttribute("path",request.getContextPath()); %> <script type="text/javascript" src="${path}/js/jquery-1.11.0.min.js"></script> <%-- ajax实现 --%> <script type="text/javascript"> //ajax所有操作都在一个页面,点击增加、编辑的时候需要显示/隐藏div function switchDiv(part) { //隐藏所有内容 $('#addDiv').css("display","none") $('#listDiv').css("display","none") $('#editDiv').css("display","none") if(1 == part){ //点击添加,将添加页面设置为block显示 $('#addDiv').css("display","block") $('#add_dname').val('') }else if(2 == part){ //显示所有的部门列表 $('#listDiv').css("display","block") }else if(3 == part){ //点击编辑,将编辑页面设置为block显示 $('#editDiv').css("display","block") } } //页面加载成功执行 $(function () { //显示部门列表display -> block switchDiv(2) //显示所有 deptListUI() //点击增加 $('#btn_add').click(function () { //alert('btn_add') 普通的表单提交 did=1&dname=测试组 //serialize()方法表单序列化,会将表单数据拼接成k1=v1&k2=v2 var data = $('#add_form').serialize() $.post('${path}/deptv2/saveDept',data,function (resultMsg) { console.info(resultMsg) //页面切换,隐藏所有,显示增加页面 switchDiv(2) //重新加载列表 deptListUI() //切换页面 switchDiv(2) alert(resultMsg.message) },'json') }) }) //显示部门列表 function deptListUI() { //1. js发送请求,通过调用方法访问数据库,获取json数据(部门信息列表) $.get('${path}/deptv2/deptList', function (resultMsg){ //2. js接收数据,打印到浏览器的控制台(后台转json数据格式了) console.info("resultMsg = " + resultMsg) //定义表格table标签的内容(最外层用''单引号防止转移字符\) var trs = '' //拼接表头 trs += ' <tr>\n' + ' <th>序号</th>\n' + ' <th>部门编号</th>\n' + ' <th>部门名称</th>\n' + ' <th>操作</th>\n' + '\n' + ' </tr>' //返回状态码200正常,拼接数据 if (200 == resultMsg.code) { var items = resultMsg.data; //3. js循环获取数据更新页面 for (var i = 0; i < items.length;i++) { var dept = items[i] //打印到控制台,查看数据是否获取 console.info(dept) //进行拼接数据 trs += ' <tr>\n' + ' <td>' + (i + 1) + '</td>\n' + ' <td>' + dept.did + '</td>\n' + ' <td>' + dept.dname + '</td>\n' + ' <td><a href="javascript:deleteDept('+dept.did+')">删除 | </a><a href="javascript:updateDeptUI('+dept.did+')">修改</a></td>\n' + '\n' + ' </tr>' } //通过html将数据拼接到table中 $('#table').html(trs) } },'json') } //通过id删除部门,要传递参数 function deleteDept(did) { $.get('${path}/deptv2/deleteDept?did='+did,function (resultMsg) { console.info(resultMsg) if(200==resultMsg.code){ //显示删除结果 alert(resultMsg.message) deptListUI()//调用列表更新 }else{ alert(resultMsg.message) } },'json') } //更新回显页面,查询数据库,将查询的信息回显到该页面上 function updateDeptUI(did) { //alert(did) //页面切换,显示修改页面 switchDiv(3) //获取被修改的数据作回显 $.get('${path}/deptv2/findDeptById?did='+did,function (resultMsg) { if(200==resultMsg.code){ var dept = resultMsg.data; //{"code":200,"message":null,"data":{"did":1,"dname":"Java开发部"}} //查到数据给更新页面赋值 $('#u_did1').val(dept.did) $('#u_did2').val(dept.did) $('#u_dname').val(dept.dname) }else{ alert(result.message)//提示没有查询结果 } },'json') } //执行更新 function updateDept() { var data=$('#update_form').serialize();// k1=v1&k2=v2 $.post('${path}/deptv2/updateDept',data,function (resultMsg) { console.info(resultMsg) alert(resultMsg.message) //刷新列表 deptListUI() //切换页面 switchDiv(2) },'json') } </script></head><body><br/><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"> <%-- disabled的数据表单提交是不会发送给后台的,设置一个隐藏域 --%> <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="updateDept()" type="button" value="保存修改"/><br/> </form></div></body></html>123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
2.1.1 后台DepartmentController
这里面使用@ResponseBody
注解将返回的结果转换为json
数据格式,需要jackson
的使用
//版本2 - 使用ajax来CRUD//地址带UI的表示显示(打开)一个页面,不带UI的是查询返回json格式数据/* 一般修改操作都有回显界面(增加、删除、更新),查询不需要回显页面,就是新出一个页面供你更改数据 回显就是两个方法,先查询显示,再修改(两个sql) */@Controller@RequestMapping("/deptv2")public class DepartmentController { //slf4j日志 private static final Logger log = LoggerFactory.getLogger(DepartmentController.class); @Autowired private IDepartmentService departmentService;//1. 查询显示所有部门 //跳转显示所有部门信息页面【UI只做页面跳转】 @RequestMapping(path = "/deptListUI",method = RequestMethod.GET) public String deptListUI(Model model){ return "list_depts"; } //不带UI,查询返回json数据 //@ResponseBody注解,调用jackson库,将方法返回值转换为json字符串 @RequestMapping(path="/deptList",method = {RequestMethod.GET}) @ResponseBody public Object deptList(){ //查询所有部门方法,返回json数据格式 List<Department> allDepartments = departmentService.findAllDepartments(); log.info("deptList 查询所有部门 " + allDepartments); return Msg.init(200,"",allDepartments);//返回数据 }}123456789101112131415161718192021222324252627282930313233
2.1.2 前端list_depts.jsp
页面
环境准备:获取当前项目的路径保存到path中,导入jquery包
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %> <% //获取当前项目的路径 pageContext.setAttribute("path",request.getContextPath()); %><head> <title>Title</title> <!-- 引入--> <script type="text/javascript" src="${path}/js/jquery-1.11.0.min.js"></script></head>12345678910
2.1.3 jQuery实现部门列表的展示
<%-- ajax实现 --%> <script type="text/javascript"> //ajax所有操作都在一个页面,点击增加、编辑的时候需要显示/隐藏div function switchDiv(part) { //隐藏内容 $('#addDiv').css("display","none") $('#listDiv').css("display","none") $('#editDiv').css("display","none") if(1 == part){ //点击添加,将添加页面设置为block显示 $('#addDiv').css("display","block") $('#add_dname').val('') }else if(2 == part){ //显示所有的部门列表 $('#listDiv').css("display","block") }else if(3 == part){ //点击编辑,将编辑页面设置为block显示 $('#editDiv').css("display","block") } } //页面加载成功执行 $(function () { //1. js发送请求,通过调用方法访问数据库,获取json数据(部门信息列表) $.get('${path}/deptv2/deptList', function (resultMsg){ //2. js接收数据,打印到浏览器的控制台(后台转json数据格式了) console.info("resultMsg = " + resultMsg) //定义表格table标签的内容(最外层用''单引号防止转移字符\) var trs = '' //拼接表头 trs += ' <tr>\n' + ' <th>序号</th>\n' + ' <th>部门编号</th>\n' + ' <th>部门名称</th>\n' + ' <th>操作</th>\n' + '\n' + ' </tr>' //返回状态码200正常,拼接数据 if (200 == resultMsg.code) { var items = resultMsg.data; //3. js循环获取数据更新页面 for (var i = 0; i < items.length;i++) { var dept = items[i] //打印到控制台,查看数据是否获取 console.info(dept) //进行拼接数据 trs += ' <tr>\n' + ' <td>' + (i + 1) + '</td>\n' + ' <td>' + dept.did + '</td>\n' + ' <td>' + dept.dname + '</td>\n' + ' <td><a href="javascript:deleteDept('+dept.did+')">删除 | </a><a href="javascript:updateDeptUI('+dept.did+')">修改</a></td>\n' + '\n' + ' </tr>' } //通过html将数据拼接到table中 $('#table').html(trs) } },'json') }) </script>123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
2.1.4 html页面内容
<div id="listDiv" style="display: block"> <a href="javascript:switchDiv(1)">新增部门</a> <table border="1px" width="100%" id="table"></table></div>1234
最终显示效果:
访问deptListUI
,只进行页面跳转,jquery在页面加载时通过异步获取值。
访问deptList
获取数据,只获取json格式数据
2.2.1 后台DepartmentController
//新增保存部门 @RequestMapping(path ="/saveDept",method = {RequestMethod.POST}) @ResponseBody public Object save(Department dept){ log.info("saveDept 保存信息: dept="+dept); try { departmentService.saveDepartment(dept); return Msg.init(200,"添加成功",null); } catch (Exception e) { e.printStackTrace(); } return Msg.init(-200,"添加失败",null); }12345678910111213
2.2.2 前端list_depts.jsp
页面
jQuery的ajax实现
$('#btn_add').click(function () { //alert('btn_add') 普通的表单提交 did=1&dname=测试组 //serialize()方法表单序列化,会将表单数据拼接成k1=v1&k2=v2 var data = $('#add_form').serialize() $.post('${path}/deptv2/saveDept',data,function (resultMsg) { console.info(resultMsg) //页面切换,隐藏所有,显示增加页面 switchDiv(2) //重新加载列表 deptListUI() alert(result.msg) },'json') })12345678910111213
html内容
<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>123456789101112
2.3.1 后台DepartmentController
//删除部门功能 前台拼接删除a标签地址要携带id,发送给后台,根据id进行删除部门 @RequestMapping(path = "/deleteDept",method = {RequestMethod.GET}) public Object delete(Integer did){ log.info("deleteDept 删除部门 did = "+did); try { //删除 departmentService.deleteDepartmentById(did); //删除成功 返回200正确码 return Msg.init(200,"删除成功",null); } catch (Exception e) { e.printStackTrace(); } return Msg.init(-200,"异常,删除失败",null);//出现异常 }1234567891011121314
2.3.2 前端list_depts.jsp
页面
jquery的ajax提交
//通过id删除部门,要传递参数 function deleteDept(did) { $.get('${path}/deptv2/deleteDept?did='+did,function (resultMsg) { console.info(resultMsg) if(200==resultMsg.code){ //显示删除结果 alert(resultMsg.message) deptListUI()//调用列表更新 }else{ alert(resultMsg.message) } },'json') }12345678910111213
2.4.1 后台DepartmentController
先通过id查询到信息,然后回显到页面,给其赋值
//3. 通过id更新部门信息,需要先查询该id是否存在 //通过id查询部门 @RequestMapping(path = "/findDeptById", method = RequestMethod.GET) @ResponseBody public Object findDeptById(Integer did) { log.info("findDeptById 通过id查找部门 did=" + did); if (did != null) { //查询回显需要的数据,然后显示给更新页面赋值 Department dept = departmentService.findDepartmentById(did); if (dept != null) { //将部门信息转成json返回页面,然后显示在更新回显页面上 return Msg.init(200, null, dept); } } return Msg.init(-200, "没有查询到结果", null); }12345678910111213141516
然后进行更新操作
//进行更新操作 @RequestMapping(path="/updateDept",method = RequestMethod.POST) @ResponseBody public Object updateDept(Department dept){ //打印 log.info("updateDept 更新信息: dept="+dept); try { departmentService.updateDepartmentById(dept); return Msg.init(200, "更新部门信息成功", null); } catch (Exception e) { e.printStackTrace(); } return Msg.init(-200, "异常,更新失败", null); }123456789101112131415
2.4.2 前端list_depts.jsp
页面
jquery更新回显页面
//更新回显页面,查询数据库,将查询的信息回显到该页面上 function updateDeptUI(did) { //alert(did) //页面切换,显示修改页面 switchDiv(3) //获取被修改的数据作回显 $.get('${path}/deptv2/findDeptById?did='+did,function (resultMsg) { if(200==resultMsg.code){ var dept = resultMsg.data; //{"code":200,"message":null,"data":{"did":1,"dname":"Java开发部"}} //查到数据给更新页面赋值 $('#u_did1').val(dept.did) $('#u_did2').val(dept.did) $('#u_dname').val(dept.dname) }else{ alert(result.message)//提示没有查询结果 } },'json') }12345678910111213141516171819
jquery实现更新
//执行更新 function updateDept() { var data=$('#update_form').serialize();// k1=v1&k2=v2 $.post('${path}/deptv2/updateDept',data,function (resultMsg) { console.info(resultMsg) alert(resultMsg.message) //刷新列表 deptListUI() //切换页面 switchDiv(2) },'json') }12345678910111213
html页面
<div id="editDiv"> <%--更新回显页面--%> <h1>编辑页面</h1> <form id="update_form"> <%-- disabled的数据表单提交是不会发送给后台的,设置一个隐藏域 --%> <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="updateDept()" type="button" value="保存修改"/><br/> </form></div>1234567891011
SSM整合CRUD,aJax实现
苏公网安备 32132202001088号
| Copyright 北极熊 北格技术 版权所有