Day28SSM之CRUD開發版本2的部門增刪改查
2020-10-20 18:00:03
複製工程
複製ssm02_CRUD 成ssm03_CRUD_ajax
修改 id name
增加 模組標籤
Controller方法返回值型別Object
- （1）Controller方法返回型別可以有幾種？
ModelAndView
void
String
Object - （2）@ResponseBody
調jackson庫將Object轉成json字串返回
如果沒有依賴jackson庫則，丟擲異常
HttpMessageNotWritableException: No converter found for return value of type: class java.util.ArrayList - （3）依賴設定jackson庫
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.11.3</version>
</dependency>
Controller方法返回Result
- （1）返回結果Result
private int code;//編碼 private String msg;//提示資訊 private Object data; //資料 - （2）將資料放到Result物件中
public class Result {
private int code;//編碼 404 200
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;
}
private Result() {
}
private Result(int code, String msg, Object data) {
this.code = code;
this.msg = msg;
this.data = data;
}
Controller方法返回Result
@Controller
@RequestMapping("/deptv2") //寫在類上面指定當前模組路徑
public class DepartmentV2Controller {
@Autowired
private IDepartmentService departmentService;//controller呼叫 service層
/*@RequestMapping(path="/xx")
public 返回值型別 方法名(引數){ //頁面提交過來的請求引數
//..
返回值型別決定返回給瀏覽器的內容
}
*/
@RequestMapping(path="/listUI",method = RequestMethod.GET)
public String listUI(){
return "list_depts";
}
//地址上帶UI表示開啟頁面，不帶的表示返回資料
@RequestMapping(path="/list",method = RequestMethod.GET)
public @ResponseBody //將list調jackson轉成json字串
Object list(){
//業務邏輯 呼叫查詢所有的部門的方法
List<Department> list = departmentService.findAllDepartments();
return Result.init(200,"",list);//返回物件需要被轉成json字串
}
}
Ajax回顧
- （1）ajax是什麼
Ajax 即「Asynchronous Javascript And XML」（非同步 JavaScript 和 XML） - （2）ajax有什麼特點
通過在後臺與伺服器進行少量資料交換，Ajax 可以使網頁實現非同步更新。即可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新
上一個版本 使用重定向或者請求轉發的，叫整體重新整理
今天 使用ajax不需要重定向或者請求轉發 - （3）具體程式設計內容
js 傳送請求
js 接收結果
js 更新頁面
Jquery實現Ajax
- （1）匯入jquery庫
將庫檔案復到專案中
在頁面中引入庫
<%
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）程式碼編寫
js 傳送請求 $.get $.post serialize()
js 接收結果 function(data){…}
js 更新頁面 $(id值) html()
Jquery實現部門列表頁面
<!-- 開始ajax程式設計 -->
<script type="text/javascript">
$(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>刪除</a><a>修改</a></td>\n' +
'\n' +
' </tr>'
}//end for
$('#table').html(trs)
}
}, 'json') //參1 地址 參2 處理常式 參3 資料型別
})
</script>
刪除指定id的部門
DepartmentV2Controller
@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);
}
list_depts.jsp
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')
}
<a href="javascript:deleteById('+dept.did+')">刪除</a>
- 預設情況下點選超連結 是跳轉頁面-整體重新整理
- Ajax是區域性重新整理，點選連結呼叫函數，函數內部發起請求，處理返回結果，更新頁面
屬性display:none
- Ajax不切換頁面，所有內容在一個頁面，只需要通過style的屬性display，將值設定為none不可見，不佔高度。
- 如果需要顯示出來，設定display的值為block
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")
}
}
新增功能
後臺程式碼
//儲存一般是使用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);
}
前臺程式碼
新增的表單
<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>
新增的ajax請求
$('#btn_add').click(function () {
//alert('btn_add') 普通的表單提交 did=1&dname=測試組
var data = $('#add_form').serialize() //方法會將表單資料拼接成k1=v1&k2=v2
$.post('${path}/deptv2/add',data,function (result) {
console.info(result)
//頁面切換
switchDiv(2)
//重新載入列表
refreshTable()
alert(result.msg)
},'json')
})
修改程式碼
》》修改要有回顯，回顯就是先查，再賦值，再修改。
回顯程式碼
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')
}
呼叫查詢
@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) {
return Result.init(200, null, dept);//轉成json返回頁面
}
}
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);
}
建議使用postman先測試。
前臺程式碼
function update() {
var data=$('#update_form').serialize();// k1=v1&k2=v2
$.post('${path}/deptv2/update',data,function (result) {
alert(result.msg)
//切換頁面
switchDiv(2)
//重新整理列表
refreshTable()
},'json')
}