ajax不能传字典,ajax中json嵌套字典传入后端flask时无法显示

经过多日baidu之后解决问题，主要查阅了：

jQuery ajax - getJSON() 方法

- http://www.w3school.com.cn/jquery/ajax_getjson.asp

werkzeug官方文档reference->Data Structures

- *http://werkzeug.pocoo.org/docs/0.11/datastructures/#http-related*

flask处理json的多种情况

- *http://blog.csdn.net/zhu_free/article/details/50396616*

第一步：首先我们了解一下jQuery的ajax方法。

$.getJSON(myurl,mydata,success(data,status,xhr)) ;

getJSON函数的定义:通过HTTP GET请求载入JSON 数据。(这个从其名字叫做getJSON即可知道)

上述函数等同于

$.ajax({

type:"get",

url:"myurl",

data:mydata, //发送到服务器的数据，可以自行构造

dataType:"json", //预期服务器返回的数据类型

success:callback //callback回调函数，这里一般可要求服务器返回特定数据

});

关于ajax()中的参数设置可参考http://www.w3school.com.cn/jquery/ajax_ajax.asp

示例1：

//前端js主要代码：

let myurl="pile_calculate"

let mydata1={"fs1":1,"fs2":2};

$.ajax({

type:"get",

url:myurl,

data:mydata1,

dataType:"json",

success:callback_function()

});

//ajax提交后请求参数附加在url中:http://127.0.0.1/pile_calculate?fs1=1&fs2=2

//后端flask主要代码:

request.args.get('fs1') //out: 1 后端flask中解析数据正常

request.args.get('fs2') //out: 2 后端flask中解析数据正常

示例2：

//前端js主要代码：

let myurl="pile_calculate"

let mydata2={"G1":{"fs1":1,"fs2":2}};

$.ajax({

type:"get",

url:myurl,

data:mydata2,

dataType:"json",

success:callback_function()

});

//ajax提交后请求参数附加在url中:http://127.0.0.1/pile_calculate?G1[fs1]=1&G1[fs2]=2

//后端flask主要代码:

request.args.get('G1') //out:None 后端flask中解析数据不正常

那么问题来了，

question:为什么flask对于mydata1可以正常解析,对于myata2则不能解析呢？

第二步：我们了解一下flask的request.args方法。

request.args返回值类型为ImmutableMultiDict，一个类似dict的数据类型，dict具有的方法，它均具备，同时可用to_dict()方法将其转换成dict类型。

现直接引用

A MultiDict is a dictionary subclass customized to deal with multiple values for the same key which is for example used by the parsing functions in the wrappers. This is necessary because some HTML form elements pass multiple values for the same key.

MultiDict implements all standard dictionary methods. Internally, it saves all values for a key as a list, but the standard dict access methods will only return the first value for a key. If you want to gain access to the other values, too, you have to use the list methods as explained below.

answer:因为前端get请求时将发送到服务器的数据mydata2由{"G1":{"fs1":1,"fs2":2}}转换成G1[fs1]=1&G1[fs2]=2

也就意味着后端flask中request.args=ImmutableMultiDict([('G1[fs1]', '1'), ('G1[fs2]', '2')])

并非我们期望的request.args= ImmutableMultiDict([("G1", "{fs1:1}"), ("G1", "{fs2:2}")])

故后端flask语句应改成

request.args.get('G1[fs1]') //out: 1 后端flask中解析数据正常

request.args.get('G1[fs2]') //out: 2 后端flask中解析数据正常

修改后，虽然可以正常显示，但明显不利于编程，特别对于字典嵌套多层字典的情况，更为不利。

第三步：改进

//前端js主要代码，主要改进的内容是利用JSON.stringify()将json对象转换成字符串，以避免get提交时对json对象的破坏：

let myurl="pile_calculate"

let mydata2={"G1":{"fs1":1,"fs2":2}};

$.ajax({

type:"get",

url:myurl,

data:JSON.stringify(mydata2),//将json对象转换成字符串

dataType:"json",

success:callback_function()

});

//ajax提交后请求参数附加在url中:http://127.0.0.1/pile_calculate?{"G1":{"fs1":1,"fs2":2}}

//后端flask主要代码,主要改进的内容是将返回值转换成dict,而后提取dict的第一个key,并通过eval()函数将字符串化的key转换成dict:

// request.args返回值为:ImmutableMultiDict([('{"G2":{"fs1":1,"fs2":2}}', '')])

myargs=request.args.to_dict()

//out :{"{'G2':{'fs1':1,'fs2':2}}":""}

for outerkey in myargs.keys():

return eval(outerkey) //eval(outerkey) 将字符串形式的outerkey类型转换为字典

以上是本人的浅见，有改进或不对的地方，欢迎大家喷水。

另外，由于本人是segment新手，排版比较乱，望同学们见谅。