SSM的CRUD练习
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('服务问题,请求失败')
}
})
}