因業務需求，今天需要ajax請求的時候從後端返回一個map，但是問題是怎麼在前端取值，這個以前遇到過，以為會比較簡單，但是百度很多答案都不完整，導致沒有辦法借鑑。這裡做下記錄

後端程式碼：

@RequestMapping(value="/getCityByLevel.action", method = RequestMethod.POST)
    public @ResponseBody Object getCityByLevel() {
        //查詢一線城市
        List<RhCityDto> cityInfo = rhCityService.listCityByLevel("");
        List<RhCityDto> cityInfo1 = new ArrayList<RhCityDto>();
        List<RhCityDto> cityInfo2 = new ArrayList<RhCityDto>();

        for(RhCityDto info :cityInfo){
            if(CITY_LEVEL_ONE.equals(info.getLevel())){
                cityInfo1.add(info);
            }else{
                cityInfo2.add(info);
            }
        }
        HashMap<String, Object> map = new HashMap<>();
        map.put("cityInfo1",cityInfo1);
        map.put("cityInfo2",cityInfo2);
        return map;
    }
 

可以看到上面的程式碼返回的是Map<String,List<Object>>，注意使用了@ResponseBody註解

前端請求和處理程式碼：

/**
 * 城市下拉複選框內容賦值
 */
function initCity(){
    var json = {
    };
    $.ajax({
        type: "POST",
        url: "../bireport/getCityByLevel.action",
        contentType : "application/json",
        dataType:"json",
        data: JSON.stringify(json),
        success: function(resp){
            //這裡的cityInfo1是後端map的key
            var aa = resp["cityInfo1"];
            var firstCity ="";
            for(var city in aa){
                firstCity+= "<option value='"+aa[city].code+"'>"+aa[city].name+"</option>"
            }
             aa = resp["cityInfo2"];
            var secondCity ="";
            for(var city in aa){
                secondCity+= "<option value='"+aa[city].code+"'>"+aa[city].name+"</option>"
            }
             
            $("#firstCity").html(firstCity);
            $('#firstCity').selectpicker("refresh");
            $("#secondCity").html(secondCity);
            $('#secondCity').selectpicker("refresh");

        },
        error:function(resp){
            $.messager.alert('出錯了','系統出錯，請聯絡管理員。','error');
        }
    });
}
 

上面的 dataType宣告為"json"

注意點：

1前端傳送ajax請求時 dataType一定宣告為"json"

ajax請求dataType值為json，jquery就會把後端返回的字串嘗試通過JSON.parse()嘗試解析為js物件。所以如果你不將dataType設定為json，可以這樣自己用json解析，如下：

/**
 * 城市下拉複選框內容賦值
 */
function initCity(){
    var json = {
    };
    $.ajax({
        type: "POST",
        url: "../bireport/getCityByLevel.action",
        contentType : "application/json",
        dataType:"text",
        data: JSON.stringify(json),
        success: function(resp){
            //自己進行json解析也可以
            resp = JSON.parse(resp);
            var aa = resp["cityInfo1"];
            var firstCity ="";
            for(var city in aa){
                firstCity+= "<option value='"+aa[city].code+"'>"+aa[city].name+"</option>"
            }
             aa = resp["cityInfo2"];
            var secondCity ="";
            for(var city in aa){
                secondCity+= "<option value='"+aa[city].code+"'>"+aa[city].name+"</option>"
            }
 
            $("#firstCity").html(firstCity);
            $('#firstCity').selectpicker("refresh");
            $("#secondCity").html(secondCity);
            $('#secondCity').selectpicker("refresh");

        },
        error:function(resp){
            $.messager.alert('出錯了','系統出錯，請聯絡管理員。','error');
        }
    });
}
 

預期伺服器返回的資料型別。如果不指定，jQuery 將自動根據 HTTP 包 MIME 資訊來智慧判斷，比如 XML MIME 型別就被識別為 XML。在 1.4 中，JSON 就會生成一個 JavaScript 物件，而 script 則會執行這個指令碼。隨後伺服器端返回的資料會根據這個值解析後，傳遞給回撥函式。可用值: 

•"xml": 返回 XML 文件，可用 jQuery 處理。
•"html": 返回純文字 HTML 資訊；包含的 script 標籤會在插入 dom 時執行。
•"script": 返回純文字 JavaScript 程式碼。不會自動快取結果。除非設定了 "cache" 引數。注意：在遠端請求時(不在同一個域下)，所有 POST 請求都將轉為 GET 請求。（因為將使用 DOM 的 script標籤來載入）
•"json": 返回 JSON 資料 。
•"jsonp": JSONP 格式。使用 JSONP 形式呼叫函式時，如 "myurl?callback=?" jQuery 將自動替換 ? 為正確的函式名，以執行回撥函式。
•"text": 返回純文字字串
 

2後臺方法的宣告需要使用@responseBody？？

@responseBody註解的作用是將controller的方法返回的物件通過適當的轉換器轉換為指定的格式之後，寫入到response物件的body區，通常用來返回JSON資料或者是XML資料。

這個註解表示該方法的返回結果直接寫入HTTP response body中，一般在非同步獲取資料時使用。

在使用@RequestMapping後，返回值通常解析為跳轉路徑。加上@responsebody後，返回結果直接寫入HTTP response body中，不會被解析為跳轉路徑。比如非同步請求，希望響應的結果是json資料，那麼加上@responsebody後，就會直接返回json資料。