SSM的CRUD练习

ajax与请求转发或者重定向的区别SSM的CRUD，使用ajax实现小技巧ajax模板 实例项目演示环境搭建pom.xmlResult类DepartmentDepartmentControllermain.jsp前端html和jquery代码 具体步骤通过ajax实现显示所有部门信息DepartmentControllerjshtml页面内容 增加操作DepartmentControllerhtml页面JS 删除操作DepartmentControllerJSJS 修改操作DepartmentControllerhtml页面JS

ajax与请求转发或者重定向的区别

请求转发和重定向每次把数据交给浏览器都需要打开新的页面,为整体刷新 而ajax却可以在一个页面进行发出请求,接收结果,也就是部分更新(局部刷新) 在后面ajax比请求转发或者重定向更加常用

SSM的CRUD，使用ajax实现

小技巧

1.我们在Controller中对于@RequestMapping注解参数path的值，可以用是否带UI后缀来区分. 带UI后缀地址的表示显示（打开）一个页面,不访问数据,只是做单纯的页面跳转 不带UI的是访问数据库，通过sql查询，然后通过jackson实现返回json格式的参数

2.使用ajax进行增删查改的时候，所有的内容都在一个页面上完成，通过jQuery函数css设置style的属性display，可将其值设置为none不可见（不占页面空间的），block可见。

3.ajax处理事件的流程一般为 请求->处理 或者 事件->请求->处理 $.get(‘地址’,处理函数,数据类型) 地址:项目名/模块名/功能名 处理函数:function(xxx){} 数据类型:json 例如 增加数据

$(function () { switchUI(2) refreshTable() //点击增加数据**事件** $('#btn_add').click(function () { var data = $('#add_form').serialize() //方法会将表单数据自动拼接成k1=v1&k2=v2 did=1&dname=测试组 //发送请求 $.post('${path}/department/add',data,function (result) { //处理函数 console.info(result) //页面切换 switchUI(2) refreshTable() alert(result.msg) },'json') }) })

ajax模板

//后台 @RequestBody consumes="application/json @RequestMapping(path ="/update",method = RequestMethod.POST,consumes="application/json") public @ResponseBody Object update(@RequestBody Department department){ System.out.println(department); try{ iDepartmentDao.updateDepartmentById(department); return Result.init(200,"保存成功",null); //返回对象需要被转成json字符串 }catch (Exception e){ e.printStackTrace(); } return Result.init(-200,"保存失败",null); //返回对象需要被转成json字符串 } //前台 $.ajax({ url:'${path}/模块名/功能名', async:true, data:'{"did":"","dname":"'+dname+'"}', type:"post", contentType:"application/json;charset=utf-8", success:function(result){ if(200==result.code){ alert(result.msg) } }, error:function(result){ alert('服务问题,请求失败') } }) var did= $('#u_did2').val() var dname= $('#u_dname').val() $.ajax({ url:'${path}/department/update', async:true, data:'{"did":"'+did+'","dname":"'+dname+'"}', type:"post", contentType:"application/json;charset=utf-8", success:function(result){ if(200==result.code){ alert(result.msg) //切换页面 switchUI(1) //刷新列表 refreshTable() } }, error:function(result){ alert('服务问题,请求失败') } })

实例

项目演示

jssm框架,ajax请求的增删查改

环境搭建pom.xml

pom.xml jakcson实现javabean对象与json数据之间转换。

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

Result类

//ajax返回提示信息类

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

Department

//部门 public class Department { private Integer did; private String dname; //省略get/set方法 }

DepartmentController

//使用ajax来CRUD //地址带UI的表示显示（打开）一个页面，不带UI的是查询返回json格式数据 /* 一般修改操作都有回显界面（增加、删除、更新），查询不需要回显页面， 回显就是先查询显示，再修改（两个sql） */ package com.zx.controller; import com.zx.dao.IDepartmentDao; import com.zx.domain.Department; import com.zx.domain.Result; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.ResponseBody; import java.util.List; @Controller @RequestMapping("/department")//写在类上面指定当前模块路径 public class DepartmentController { @Autowired IDepartmentDao iDepartmentDao; //地址上带UI表示打开页面，不带的表示返回数据 @RequestMapping(path = "/main",method = RequestMethod.GET) public String listUI(){ return "main"; } //不带UI的表示返回数据 @RequestMapping(path = "/list",method = RequestMethod.GET) public @ResponseBody Object list(){ List<Department> list=iDepartmentDao.findAllDepartment(); System.out.println(list); return Result.init(200,"",list); //返回对象需要被转成json字符串 } @RequestMapping(path = "/delete",method = RequestMethod.GET) public @ResponseBody Object delete(Integer did){ System.out.println(did); try{ iDepartmentDao.deleteDepartmentById(did); return Result.init(200,"删除成功",null); //返回对象需要被转成json字符串 }catch (Exception e){ } return Result.init(-200,"删除失败",null); //返回对象需要被转成json字符串 } @RequestMapping(path ="/add",method = RequestMethod.POST) public @ResponseBody Object add(Department department){ System.out.println(department); try{ iDepartmentDao.saveDepartment(department); return Result.init(200,"保存成功",null); //返回对象需要被转成json字符串 }catch (Exception e){ } return Result.init(-200,"保存失败",null); //返回对象需要被转成json字符串 } @RequestMapping(path = "/find",method = RequestMethod.GET) public @ResponseBody Object find(Integer did){ System.out.println(did); if(did!=null){ Department department= iDepartmentDao.findDepartmentByID(did); if(department!=null){ return Result.init(200,null,department); //返回对象需要被转成json字符串 } } return Result.init(200,null,null); } @RequestMapping(path ="/update",method = RequestMethod.POST) public @ResponseBody Object update(Department department){ System.out.println(department); try{ iDepartmentDao.updateDepartmentById(department); return Result.init(200,"保存成功",null); //返回对象需要被转成json字符串 }catch (Exception e){ } return Result.init(-200,"保存失败",null); //返回对象需要被转成json字符串 } }

main.jsp前端html和jquery代码

<%@ page contentType="text/html;charset=UTF-8" isELIgnored="false" language="java" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <html> <% pageContext.setAttribute("path",request.getContextPath()); %> <head> <title>Title</title> <!-- 引入jquery库--> <script type="text/javascript" src="${path}/js/jquery-1.11.0.min.js"></script> <!-- 开始ajax编程 --> <%--<script type="text/javascript"> alert(111); /* 页面切换*/ function switchUI(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(){ alert(111) //1:js发送请求 $.get('${path}/department/list', function (result) { //2:js接收结果 接收数据 console.info("result=" + result) //{"code":200,"msg":"","data":[{"did":1,"dname":"java"},{"did":11,"dname":"python"},{"did":12,"dname":"php"},{"did":13,"dname":"web"},{"did":14,"dname":"c"}]} //定义表格的内容 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 () { alert(111) switchUI(2) refreshTable() }) /*增加数据*/ $('#btn_add').click(function () { var data = $('#add_form').serialize() //方法会将表单数据自动拼接成k1=v1&k2=v2 did=1&dname=测试组 $.post('${path}/department/add',data,function (result) { console.info(result) //页面切换 switchUI(2) refreshTable() alert(result.msg) },'json') }) /* 删除数据*/ function deleteById(did) { $.get('${path}/department/delete?did='+did+'',function (ruselt) { console.info(ruselt) if(200==ruselt.code){ alert(ruselt.msg) } else { alert(ruselt.msg) } refreshTable() },'json') } /!* 修改数据*!/ // 回显 function updateUI(did) { //显示修改页面 switchUI(3) //获得回显数据 $.get('${path}/department/find='+did+'',function (result) { console.info(result) if(200==result.code){ var department=result.data() ${'#u_did_1'}.val(department.did) ${'#u_did_2'}.val(department.did) ${'#dname'}.val(department.dname) }else { alert(result.msg) } },'json') } function update() { var data=$('update_form').serialize() $.post('${path}/department/update',data,function (result) { alert(result.msg) //切换页面 switchUI(2) refreshTable() },'json') } </script>--%> <script type="text/javascript"> /* 页面切换*/ function switchUI(part) { /* 默认全部隐藏*/ $('#listDiv').css("display","none") $('#addDiv').css("display","none") $('#editDiv').css("display","none") if(1 == part){//列表页面 $('#listDiv').css("display","block") }else if(2 == part){//添加页面 $('#addDiv').css("display","block") $('#add_dname').val('') } else if(3 == part){//编辑页面 $('#editDiv').css("display","block") } } //把数据发送到页面 function refreshTable(){ //1:js发送请求 $.get('${path}/department/list', function (result) { //2:js接收结果 接收数据 console.info("result=" + result) //{"code":200,"msg":"","data":[{"did":1,"dname":"java"},{"did":11,"dname":"python"},{"did":12,"dname":"php"},{"did":13,"dname":"web"},{"did":14,"dname":"c"}]} //定义表格的内容 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 () { switchUI(1) refreshTable() }) /*增加数据*/ function add() { var data01 = $('#add_form').serialize() //方法会将表单数据自动拼接成k1=v1&k2=v2 did=1&dname=测试组 $.post('${path}/department/add',data01,function (result) { console.info(result) //页面切换 switchUI(1) refreshTable() alert(result.msg) },'json') } /* 删除数据*/ function deleteById(did) { $.get('${path}/department/delete?did='+did+'',function (ruselt) { console.info(ruselt) if(200==ruselt.code){ alert(ruselt.msg) } else { alert(ruselt.msg) } refreshTable() },'json') } /!* 修改数据*!/ // 回显 function updateUI(did) { //显示修改页面 switchUI(3) //获取被修改的数据作回显 $.get('${path}/department/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 data02 = $('#update_form').serialize()// k1=v1&k2=v2 $.post('${path}/department/update',data02,function (result) { alert(result.msg) //切换页面 switchUI(1) //刷新列表 refreshTable() },'json') } </script> </head> <body> <div id="listDiv" > <a href="javascript:switchUI(2)">新增</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" οnclick="add()" type="button" value="保存"/><br/> </form> </div> <div id="editDiv" > <h1>修改页面</h1> <form id="update_form"> <input id="u_did1" type="hidden" name="did1" > <input id="u_did2" type="text" name="did2" disabled="disabled"/><br/> <input id="u_dname" type="text" name="dname" /><br/> <input id="btn_update" οnclick="update()" type="button" value="保存修改"/><br/> </form> </div> </div> </body> </html>

具体步骤

通过ajax实现显示所有部门信息

@ResponseBody注解将返回的结果转换为json数据格式

DepartmentController

@RequestMapping(path = "/list",method = RequestMethod.GET) public @ResponseBody Object list(){ List<Department> list=iDepartmentDao.findAllDepartment(); System.out.println(list); return Result.init(200,"",list); //返回对象需要被转成json字符串 }

js

function refreshTable(){ //1:js发送请求 $.get('${path}/department/list', function (result) { //2:js接收结果 接收数据 console.info("result=" + result) //{"code":200,"msg":"","data":[{"did":1,"dname":"java"},{"did":11,"dname":"python"},{"did":12,"dname":"php"},{"did":13,"dname":"web"},{"did":14,"dname":"c"}]} //定义表格的内容 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 数据类型 }

html页面内容

<div id="listDiv" > <a href="javascript:switchUI(1)">新增</a> <table border="1px" width="100%" id="table"></table> </div>

增加操作

DepartmentController

@RequestMapping(path ="/add",method = RequestMethod.POST) public @ResponseBody Object add(Department department){ System.out.println(department); try{ iDepartmentDao.saveDepartment(department); return Result.init(200,"保存成功",null); //返回对象需要被转成json字符串 }catch (Exception e){ } return Result.init(-200,"保存失败",null); //返回对象需要被转成json字符串 }

html页面

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

JS

$(function () { switchUI(2) refreshTable() $('#btn_add').click(function () { var data = $('#add_form').serialize() //方法会将表单数据自动拼接成k1=v1&k2=v2 did=1&dname=测试组 $.post('${path}/department/add',data,function (result) { console.info(result) //页面切换 switchUI(2) refreshTable() alert(result.msg) },'json') }) })

删除操作

DepartmentController

@RequestMapping(path = "/delete",method = RequestMethod.GET) public @ResponseBody Object delete(Integer did){ System.out.println(did); try{ iDepartmentDao.deleteDepartmentById(did); return Result.init(200,"删除成功",null); //返回对象需要被转成json字符串 }catch (Exception e){ } return Result.init(-200,"删除失败",null); //返回对象需要被转成json字符串 }

JS

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

JS

/* 删除数据*/ function deleteById(did) { $.get('${path}/department/delete?did='+did+'',function (ruselt) { console.info(ruselt) if(200==ruselt.code){ alert(ruselt.msg) } else { alert(ruselt.msg) } refreshTable() },'json') }

修改操作

DepartmentController

通过did来查询,并回显数据

@RequestMapping(path = "/find",method = RequestMethod.GET) public @ResponseBody Object find(Integer did){ System.out.println(did); if(did!=null){ Department department= iDepartmentDao.findDepartmentByID(did); if(department!=null){ return Result.init(200,null,department); //返回对象需要被转成json字符串 } } return Result.init(200,null,null); }

更新操作

@RequestMapping(path ="/update",method = RequestMethod.POST) public @ResponseBody Object update(Department department){ System.out.println(department); try{ iDepartmentDao.updateDepartmentById(department); return Result.init(200,"保存成功",null); //返回对象需要被转成json字符串 }catch (Exception e){ } return Result.init(-200,"保存失败",null); //返回对象需要被转成json字符串 }

html页面

<div id="editDiv"> <h1>修改页面</h1> <form id="update_form"> <input id="u_did_1" type="hidden" > <input id="u_did_2" type="text" disabled="disabled"/><br/> <input id="dname" type="text" /><br/> <input id="btn_update" onclick="update()" type="button" value="保存修改"/><br/> </form>

JS

回显操作,更新操作

/!* 修改数据*!/ // 回显 function updateUI(did) { //显示修改页面 switchUI(3) //获取被修改的数据作回显 $.get('${path}/department/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 data02 = $('#update_form').serialize()// k1=v1&k2=v2 $.post('${path}/department/update',data02,function (result) { alert(result.msg) //切换页面 switchUI(1) //刷新列表 refreshTable() },'json')*/ var did= $('#u_did2').val() var dname= $('#u_dname').val() $.ajax({ url:'${path}/department/update', async:true, data:'{"did":"'+did+'","dname":"'+dname+'"}', type:"post", contentType:"application/json;charset=utf-8", success:function(result){ if(200==result.code){ alert(result.msg) //切换页面 switchUI(1) //刷新列表 refreshTable() } }, error:function(result){ alert('服务问题,请求失败') } }) }