AJAX的post提交数组数据-白红宇

AJAX的post提交数组数据

阅读量：7305 次

发布时间：2019-06-30

本文共 5212 字，大约阅读时间需要 17 分钟。

前端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.01Accept-Encoding:gzip, deflateAccept-Language:zh-CN,zh;q=0.8Connection:keep-aliveContent-Length:368Content-Type:application/x-www-form-urlencodedCookie: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=3C2A4BAC9541B9F6FD69F73A2D4F36C6Host:localhost:8080Origin:http://localhost:8080Referer:http://localhost:8080/euht/alarm/setting/toPage.doUser-Agent:Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.75 Safari/537.36X-Requested-With:XMLHttpRequestForm Data:alarmMonitor[0][id]:0alarmMonitor[0][alarmLevel]:0alarmMonitor[0][defaultOverValue]:0alarmMonitor[0][isEnabled]:0alarmMonitor[1][id]:1alarmMonitor[1][alarmLevel]:1alarmMonitor[1][defaultOverValue]:1alarmMonitor[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){}

完美解决问题！！

转载于:https://my.oschina.net/u/2381372/blog/653077

你可能感兴趣的文章