SSM框架用JSON進行前後端數據傳輸
阿新 • • 發佈：2017-09-04
回調函數 fse 刷新 number 返回結果 itl 美化 label -o
一個根據用戶id查找用戶信息的簡單功能，使用JSON進行數據的傳輸
前端代碼
這裏用bootstrap做簡單的樣式美化,中間留了個div用來異步的顯示查詢結果，ajax進行前端的數據傳輸（class內容可以無視，只有美化效果）：
<form class="form-horizontal" >
<label for="firstname" class="col-sm-2 control-label">用戶ID</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="user_id" placeholder="請輸入用戶ID">
</div>
<div class="col-sm-offset-2 col-sm-10">
<button type="button" id="select" class="btn btn-default">查找</button>
</div>
</form>
<div class="panel-body">
<h2 class="text-danger text-center">
<!-- 用來顯示查找結果 -->
<span class="glyphicon" id="select-box"></span>
</h2>
</div>
$(function(){
$("#select").click(function() {
$.ajax({
url : "peopleSelect",
type : "POST",
dataType:"json",
contentType : "application/json;charset=UTF-8",
<!-- 向後端傳輸的數據 -->
data : JSON.stringify({
id : $("#user_id").val(),
}),
success:function(result) {
<!-- 處理後端返回的數據 -->
var message= JSON.stringify(result);
$("#select-box").html("查詢成功" + message);
},
error:function(result){
$("#select-box").html("查詢失敗");
}
});
});
}); 後端代碼
Controller
這裏主要用@RequestBody轉換接受的JSON為對象，用@ResponseBody轉換返回的對象為JSON。
有兩種接受前端數據的方式，一種使用Map接受，一種使用實體類進行接收，使用Map接受的方法為：
@RequestMapping("/peopleSelect")
@ResponseBody
public People peopleSelect(@RequestBody Map<String,String> map) {
//使用map.get方法得到JSON中id對應的值
long id = Long.parseLong(map.get("id"));
//查找對應id的用戶信息
People people = peopleService.getById(id);
//返回用戶信息，要使用@ResponseBody將返回值轉換為JSON
return people;
} 使用實體類接受的話，要求實體類中有對應的屬性，如People中有id,name,age屬性，只能接受鍵名為id,name,age的JSON（可以不全有，但不能有People中沒有的屬性），方法為：
@RequestMapping("/peopleSelect")
@ResponseBody
public People peopleSelect(@RequestBody People requestPeople ) {
//使用requestPeople.getId方法得到JSON中id對應的值
long id = requestPeople.getId();
//查找對應id的用戶信息
People people = peopleService.getById(id);
//返回用戶信息，要使用@ResponseBody將返回值轉換為JSON
return people;
} 最後說幾個遇到的問題：
一.點擊查找按鈕後，頁面會快速刷新，看不到返回結果
提交按鈕的type一定要設置為button，不要使用submit，因為submit會默認點擊提交，而ajax也會提交，這就產生了ajax的返回結果還沒看清就因為submit的提交而刷新了頁面。
二.後臺查詢結果沒問題，卻總是調用ajax的error回調函數
ajax對返回數據的要求很嚴格，一定要是嚴格的JSON數據返回才會進行success的回調，只要有一條數據不是嚴格的JSON格式就會調用error的回調函數，最好將查詢結果封裝為一個類，每次查詢返回這個類，類中包含查詢結果或者錯誤信息。
SSM框架用JSON進行前後端數據傳輸