文章目錄
- SSM的CRUD，使用ajax實作
- 1. 主要代碼（模板）
- 1.1 環境
- 1.2 DepartmentController
- 1.3 list_depts.jsp前端html和jquery代碼
- 2. 具體步驟
- 2.1 通過ajax實作顯示所有部門資訊
- 2.2 增加操作
- 2.3 洗掉操作 通過id洗掉部門
- 2.4 更新操作（通過id更新）
- 3. 原始碼下載
SSM的CRUD，使用ajax實作
基本資訊介紹
??版本2 - 使用ajax來進行CRUD，
??在Controller中對于@RequestMapping注解引數path的值，用兩種區分，一種帶后綴UI，一種不帶，
- 地址后綴帶UI的表示顯示（打開）一個頁面，只是做單純的頁面跳轉，不訪問資料庫，
- 不帶UI的是訪問資料庫，通過sql查詢，然后通過jackson實作回傳json格式的引數，
使用aJax進行增刪查改的時候，是不需要切換頁面的，所有的內容都在一個頁面上，通過css設定style的屬性display，將其值設定為none不可見（這種方式是不占頁面空間的），需要顯示的時候通過設定display為block顯示出來，
可以用一下方法實作：
最終效果：
1. 主要代碼（模板）
1.1 環境
pom.xml需要fasterxml的依賴實作javabean物件與json資料之間轉換，
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.11.3</version>
</dependency>
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方法
}
Department
//部門
public class Department {
private Integer did;
private String dname;
//省略get/set方法
}
1.2 DepartmentController
//版本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);
}
}
1.3 list_depts.jsp前端html和jquery代碼
<%@ 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>
2. 具體步驟
2.1 通過ajax實作顯示所有部門資訊
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);//回傳資料
}
}
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>
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>
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>
最終顯示效果：
訪問deptListUI，只進行頁面跳轉，jquery在頁面加載時通過異步獲取值，
訪問deptList獲取資料，只獲取json格式資料
2.2 增加操作
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);
}
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')
})
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>
2.3 洗掉操作 通過id洗掉部門
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);//出現例外
}
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')
}
2.4 更新操作（通過id更新）
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);
}
然后進行更新操作
//進行更新操作
@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);
}
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')
}
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')
}
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>
3. 原始碼下載
SSM整合CRUD，aJax實作
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/183798.html
標籤：其他