SSM架構用JSON進行前後端資料轉送

標籤：name   tty   com   接收   ring   hicon   btn   var   傳回值   

 一個根據使用者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進行前後端資料轉送