SSM框架用JSON進行前後端數據傳輸

轉載源自：https://www.cnblogs.com/lizhen-home/p/7472865.html

 

一個根據用戶id查找用戶信息的簡單功能，使用JSON進行數據的傳輸

前端代碼

這裏用bootstrap做簡單的樣式美化,中間留了個div用來異步的顯示查詢結果，ajax進行前端的數據傳輸（class內容可以無視，只有美化效果）：

 1 <form class="form-horizontal" >
 2     <label for="firstname" class="col-sm-2 control-label">用戶ID</label>
 3     <div class="col-sm-10">
 4       <input type="text" class="form-control" id="user_id" placeholder="請輸入用戶ID">
 5     </div>
 6     <div class="col-sm-offset-2 col-sm-10">
 7       <button type="button" id="select" class="btn btn-default">查找</button>
 8     </div>
 9 
10 </form>
11 <div class="panel-body">
12     <h2 class="text-danger text-center">
13         <!-- 用來顯示查找結果 -->
14         <span class="glyphicon" id="select-box"></span>
15     </h2>
16 </div>
17 $(function(){
18 $("#select").click(function() {
19             $.ajax({
20                 url : "peopleSelect",
21                 type : "POST",
22                 dataType:"json",
23                 contentType : "application/json;charset=UTF-8",
24                 <!-- 向後端傳輸的數據 -->
25                 data : JSON.stringify({
26                     id : $("#user_id").val(),
27                 }),
28                 success:function(result) {
29                     <!-- 處理後端返回的數據 -->
30                     var message= JSON.stringify(result);
31                     $("#select-box").html("查詢成功" + message);
32                 },
33                 error:function(result){
34                     $("#select-box").html("查詢失敗");
35                 }
36             });
37         });
38 });

 

後端代碼

Controller

這裏主要用@RequestBody轉換接受的JSON爲對象，用@ResponseBody轉換返回的對象爲JSON。 
有兩種接受前端數據的方式，一種使用Map接受，一種使用實體類進行接收，使用Map接受的方法爲：

 1 @RequestMapping("/peopleSelect")
 2     @ResponseBody
 3     public People peopleSelect(@RequestBody Map<String,String> map) {
 4         //使用map.get方法得到JSON中id對應的值
 5         long id = Long.parseLong(map.get("id"));
 6         //查找對應id的用戶信息
 7         People people = peopleService.getById(id);
 8         //返回用戶信息，要使用@ResponseBody將返回值轉換爲JSON
 9         return people;
10     }

 

使用實體類接受的話，要求實體類中有對應的屬性，如People中有id,name,age屬性，只能接受鍵名爲id,name,age的JSON（可以不全有，但不能有People中沒有的屬性），方法爲：

 1 @RequestMapping("/peopleSelect")
 2     @ResponseBody
 3     public People peopleSelect(@RequestBody People requestPeople ) {
 4         //使用requestPeople.getId方法得到JSON中id對應的值
 5         long id = requestPeople.getId();
 6         //查找對應id的用戶信息
 7         People people = peopleService.getById(id);
 8         //返回用戶信息，要使用@ResponseBody將返回值轉換爲JSON
 9         return people;
10     }

 

最後說幾個遇到的問題：

一.點擊查找按鈕後，頁面會快速刷新，看不到返回結果

提交按鈕的type一定要設置爲button，不要使用submit，因爲submit會默認點擊提交，而ajax也會提交，這就產生了ajax的返回結果還沒看清就因爲submit的提交而刷新了頁面。

二.後臺查詢結果沒問題，卻總是調用ajax的error回調函數

ajax對返回數據的要求很嚴格，一定要是嚴格的JSON數據返回纔會進行success的回調，只要有一條數據不是嚴格的JSON格式就會調用error的回調函數，最好將查詢結果封裝爲一個類，每次查詢返回這個類，類中包含查詢結果或者錯誤信息。