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

 

一個根據用戶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的回調函數，最好將查詢結果封裝為一個類，每次查詢返回這個類，類中包含查詢結果或者錯誤信息。