我知道的JavaScript--Json对象扁平化
引子:
在Asp.net mvc 框架下用Ajax方法提交一个复杂的Json 对象到Action方法上, 会出现一些问题,这里我们用Javascript 的方式去解决这个问题,在asp.net mvc 3.0 后可以使用JsonValueProviderFactory解决这个问题,但在这里我们给出用纯js解决这个问题的方案,在mvc 2.0的老系统也可以使用这种方法。
需要提交一个复杂对象如以下对象结构:
1 {
2 hotelName:’abc’,
3 hotelAddress:’ 北京海淀路72号’,
4 Rooms:[ {roomName:’标准间’,roomPrice:720},
5 {roomName:豪华间,roomPrice:1020}],
6 HotelStar:4
7 }
8 //这时我们必需转换成如下格式才能正确提交到后台Action的对象上。
9
10
11 {
12 hotelName:’abc’,
13 hotelAddress:’ 北京海淀路72号’,
14 Rooms[0]: {roomName:’标准间’,roomPrice:720},
15 Rooms[1]: {roomName:豪华间,roomPrice:1020},
16 HotelStar:4
17 }
18 //格式转换代码:
19
20 var Convert={
21 _jsonFlat:function (data, parentPro, returnObj) {
22 if (data instanceof Object) {
23 for (varpro in data) {
24 try{
25 varproValue = eval("data." +pro.toString());
26 if(proValue instanceof Array) {
27 for (var i = 0; i <proValue.length; i++) {
28 if (parentPro){
29 Convert._jsonFlat(proValue[i], parentPro + "." + pro + "["+ i + "]", returnObj);
30 }
31 else
32 Convert._jsonFlat(proValue[i], pro + "[" + i + "]",returnObj);
33 }
34 continue;
35 }
36 if(proValue instanceof Object) {
37 if(parentPro)
38 Convert._jsonFlat(proValue, parentPro + "."+ pro, returnObj);
39 else
40 Convert._jsonFlat(proValue, pro, returnObj);
41
42 continue;
43 }
44 if(parentPro)
45 returnObj[parentPro + "." + pro] = proValue;
46 else
47 returnObj[pro] =proValue;
48
49 }
50 catch(e) { };
51 }
52 return;
53 }
54 //otherwiselike string/int/datetime format
55 returnObj[parentPro] = data;
56 },jsonFlat: function(data) {
57 //debugger;
58 if(data && data instanceof Object) {
59 varretObj = {};
60 Convert._jsonFlat(data, null, retObj);
61 returnretObj;
62 }
63 return null;
64 },
65 }
解释:以上代码就是完成Json对象格式的转换,只有通过转换后的复杂Json对象才能提交到后台的Action 方法上。JsonFloat方法运用递归遍历json对象上的所有属性进行扁平化转换。
调用例子
$.ajax({ url: "controller/action", data:Convert.jsonFlat({/*your json data*/}), success: function(){ $(this).addClass("done"); } });
在3.0以后Mvc已经内置注册了JsonValueProviderFactory, 然后就可以直接这样调用ajax方法而不需要用js进行扁平化了:
但是这里需要注意的是contentType 必需设置成application/json.
$.ajax({ url: "controller/action", data:{/*your json data*/}, contentType: "application/json", success: function(){ $(this).addClass("done"); } });
后记:
[分享今天的心情]:今天中午吃完饭,回来后到cnblogs闲逛,看了一个女生写的算法的贴子。惊叹一个女生也能对技术这么执着,
这时被老板(上司)看到,然后对着我说Robbin你不要天天抱着算法至上的思想,看看我不懂算法不照样挣的比你多。
这时我也不敢回嘴可是心里却冒出一个画面:
一个包工头对着一个民工大声喊:"不要以为你力气大就挣得多,我没你力气大不是挣的比你多的多."
转载请注明出处:http://www.cnblogs.com/RobbinHan/archive/2011/12/05/2270707.html
本文作者: 十一月的雨 http://www.cnblogs.com/RobbinHan