AJAX的post提交數組數據

前端js代碼：

function AlarmCondition(id, alarmLevel, defaultOverValue, isEnabled){
        this.id = id;
        this.alarmLevel = alarmLevel;
        this.defaultOverValue = defaultOverValue;
        this.isEnabled = isEnabled;
}
var $ajax = win.$ajax = function(url, type, datas,fn,cb,contentType){ //ajax fn,cb回調 
        $.ajax({
            url:url,
            data:datas,
            type:type,
            cache:true,
            contentType: contentType?contentType:"application/x-www-form-urlencoded",
            dataType:'json',
            async:true,
            success:fn ? fn : null,
            error:cb ? cb:null
        });
    };



var data = []; 
for(var i=0; i<2; i++){
       alarmCondition.id = i;
       alarmCondition.alarmLevel = i;
       alarmCondition.isEnabled = i;
       alarmCondition.defaultOverValue = i;
       data.push(alarmCondition);
   }
}

$ajax(updateUrl,"post",{alarmMonitor:data},function(result){
       console.log(result);
},function(){});

前臺請求的報文信息:

Request Header:
Accept:application/json, text/javascript, */*; q=0.01
Accept-Encoding:gzip, deflate
Accept-Language:zh-CN,zh;q=0.8
Connection:keep-alive
Content-Length:368
Content-Type:application/x-www-form-urlencoded
Cookie:JSESSIONID=F3DF7BBD8D9B2ABE87E74971C422B456; user=Sat%20Mar%2026%202016%2017%3A34%3A58%20GMT+0800%20%28%E4%B8%AD%E5%9B%BD%E6%A0%87%E5%87%86%E6%97%B6%E9%97%B4%29; JSESSIONID=3C2A4BAC9541B9F6FD69F73A2D4F36C6
Host:localhost:8080
Origin:http://localhost:8080
Referer:http://localhost:8080/euht/alarm/setting/toPage.do
User-Agent:Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.75 Safari/537.36
X-Requested-With:XMLHttpRequest


Form Data:
alarmMonitor[0][id]:0
alarmMonitor[0][alarmLevel]:0
alarmMonitor[0][defaultOverValue]:0
alarmMonitor[0][isEnabled]:0
alarmMonitor[1][id]:1
alarmMonitor[1][alarmLevel]:1
alarmMonitor[1][defaultOverValue]:1
alarmMonitor[1][isEnabled]:1

後臺代碼：

@ResponseBody
    @RequestMapping(value="/update",produces="text/html;charset=UTF-8")
    public String update(@RequestParam(value="alarmMonitor[]") AlarmMonitor[] eaus,HttpServletRequest request){
        return null;
    }

這樣作，顯而後臺的參數eaus是得不到數據的。由於請求的報文信息裏，Form Data的數據格式是雙重數組。

後臺代碼補上如下代碼：

Map map = request.getParameterMap();
Iterator it = map.entrySet().iterator();
while (it.hasNext()) {
   Map.Entry entry = (Map.Entry) it.next();
   Object key = entry.getKey();
   Object value = entry.getValue();
   System.out.println("key=" + key + " value=" + Arrays.toString((Object[])value));
}




//打印出來的數據以下：
//key=alarmMonitor[0][id] value=[c62a52424d6e40c0815b20b63dc2a935]
//key=alarmMonitor[0][alarmLevel] value=[4]
//key=alarmMonitor[0][defaultOverValue] value=[90]
//key=alarmMonitor[0][isEnabled] value=[false]
//key=alarmMonitor[1][id] value=[07b302c3ad3545eabab091ebe7b8db69]
//key=alarmMonitor[1][alarmLevel] value=[1]
//key=alarmMonitor[1][defaultOverValue] value=[60]
//key=alarmMonitor[1][isEnabled] value=[true]

很顯然，咱們忽略了一個問題：

@RequestParam

A） 經常使用來處理簡單類型的綁定，經過 Request.getParameter() 獲取的String可直接轉換爲簡單類型的狀況，由於使用request.getParameter()方式獲取參數，因此能夠處理get 方式中queryString的值，也能夠處理post方式中 body data的值；

B）用來處理Content-Type: 爲 application/x-www-form-urlencoded編碼的內容，提交方式GET、POST；

@RequestBody

該註解經常使用來處理Content-Type: 不是application/x-www-form-urlencoded編碼的內容，例如application/json, application/xml等；它是經過使用HandlerAdapter 配置的HttpMessageConverters來解析post data body，而後綁定到相應的bean上的。

因此，當咱們前端ajax用post提交數組對象的時候，應考慮：contentType："application/json",而不該該是

"application/x-www-form-urlencoded";

---

前端js代碼：

function AlarmCondition(id, alarmLevel, defaultOverValue, isEnabled){
        this.id = id;
        this.alarmLevel = alarmLevel;
        this.defaultOverValue = defaultOverValue;
        this.isEnabled = isEnabled;
}
var $ajax = win.$ajax = function(url, type, datas,fn,cb,contentType){ //ajax fn,cb回調 
        $.ajax({
            url:url,
            data:datas,
            type:type,
            cache:true,
            contentType: contentType?contentType:"application/x-www-form-urlencoded",
            dataType:'json',
            async:true,
            success:fn ? fn : null,
            error:cb ? cb:null
        });
    };



var data = []; 
for(var i=0; i<2; i++){
       alarmCondition.id = i;
       alarmCondition.alarmLevel = i;
       alarmCondition.isEnabled = i;
       alarmCondition.defaultOverValue = i;
       data.push(alarmCondition);
   }
}

$ajax(updateUrl,"post",JSON.stringify(data),function(result){
       console.log(result);
},function(){},"application/json");

前端請求報文信息：

Request Payload:
[{id: "c62a52424d6e40c0815b20b63dc2a935", alarmLevel: "4", defaultOverValue: "90", isEnabled: false},…]
    0:{id: "c62a52424d6e40c0815b20b63dc2a935", alarmLevel: "4", defaultOverValue: "90", isEnabled: false}
        alarmLevel:"4"
        defaultOverValue:"90"
        id:"c62a52424d6e40c0815b20b63dc2a935"
        isEnabled:false
    1:{id: "07b302c3ad3545eabab091ebe7b8db69", alarmLevel: "1", defaultOverValue: "60", isEnabled: true}
        alarmLevel:"1"
        defaultOverValue:"60"
        id:"07b302c3ad3545eabab091ebe7b8db69"
        isEnabled:true

後臺代碼：

@ResponseBody
    @RequestMapping(value="/update",produces="text/html;charset=UTF-8")
    public String update(@RequestBody AlarmMonitor[] eaus,HttpServletRequest request){
}

完美解決問題！！