我知道的JavaScript--Json对象扁平化

我知道的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) {

22if (data instanceof object) {

23 for (varpro in data) {

24try{

25varprovalue = eval("data." +pro.tostring());

26if(provalue instanceof array) {

27for (var i = 0; i

28if (parentpro){

29convert._jsonflat(provalue[i], parentpro + "." + pro + "["+ i + "]", returnobj);

30 }

31else

32convert._jsonflat(provalue[i], pro + "[" + i + "]",returnobj);

33}

34continue;

35}

36if(provalue instanceof object) {

37if(parentpro)

38convert._jsonflat(provalue, parentpro + "."+ pro, returnobj);

39else

40convert._jsonflat(provalue, pro, returnobj);

41

42continue;

43}

44if(parentpro)

45returnobj[parentpro + "." + pro] = provalue;

46else

47returnobj[pro] =provalue;

48

49}

50catch(e) { };

51}

52return;

53}

54//otherwiselike string/int/datetime format

55returnobj[parentpro] = data;

56},jsonflat: function(data) {

57//debugger;

58if(data && data instanceof object) {

59varretobj = {};

60convert._jsonflat(data, null, retobj);

61returnretobj;

62}

63return 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

标签: asp.net mvc, json, javascript

绿色通道:好文要顶关注我收藏该文与我联系

posted @ 2011-11-25 12:59十一月的雨 阅读(1787) 评论(15)编辑 收藏

发表评论

2257240

回复 引用 查看

#1楼 2011-11-25 13:25 传说中的弦哥

根本没有必要对json扁平化,没用过json.net吗

回复 引用 查看

#2楼[楼主] 2011-11-25 13:36 十一月的雨

@传说中的弦哥

哥,这是在客户端用ajax提交json时用的。

回复 引用 查看

#3楼 2011-11-25 13:42 不懂设计

扁平化...

回复 引用 查看

#4楼 2011-11-25 13:44 helloworld2

为什么不纯ajax调呢

回复 引用 查看

#5楼 2011-11-25 13:50 john23.net

顶个

回复 引用 查看

#6楼 2011-11-25 14:46 痴情客

这个属于序列化吧,用词有点突然。再一个这样的事情放到服务器端处理会比较好。。http://www.scriptlover.com

回复 引用 查看

#7楼[楼主] 2011-11-25 14:59 十一月的雨

@痴情客

只是把json的格式做了一下转化,没有序列化的操作。

回复 引用 查看

#8楼 2011-11-25 15:51 单程列车

为啥搞这么麻烦呢,用jquery的serialize就好了,mvc还给你自带了jquery的,前台jqury后台json.net,配合相当好,省事省心

回复 引用 查看

#9楼[楼主] 2011-11-25 17:07 十一月的雨

@单程列车

第一个原因是项目紧没有仔细研究这一部份,就快速的coding实现自己的目的,第二个也是想在团队中show 一下coding skill :)

回复 引用 查看

#10楼 2011-11-25 17:16 黑色

我是冲着后面那句话来的

回复 引用 查看

#11楼[楼主] 2011-11-25 17:17 十一月的雨

@黑色

谢谢捧场 :)

回复 引用 查看

#12楼 2011-11-25 22:47 artwl

我是来学习js的,那段转换代码写的不错,学习了

回复 引用 查看

#13楼 2011-11-28 09:45 sking7

你们老板真犀利。。。一般上司对下面小弟很客气的。。。除非他级别很高

回复 引用 查看

#14楼 2011-11-28 09:51 sking7

楼主,可否告知什么叫 扁平化吗?

回复 引用 查看

#15楼[楼主] 2011-11-30 11:28 十一月的雨

@sking7

就是把json 的格式做一个转化,请看code demo中的例子.

注册用户登录后才能发表评论,请 登录 或 注册,返回博客园首页。

首页博问闪存新闻园子招聘知识库

最新it新闻:

·小米晒余额：支付宝昨日到账1.22亿

·windows 7官方rss动态主题：《昆虫》

·捡到iphone 4s玩自拍 icloud同步酿悲剧

·铁道部购票网站存泄密危险 cdn服务商技术短板是主因

·利用 mimo magictouch 打造另类的平板电脑

» 更多新闻...

最新知识库文章:

·设计师的品牌意识

·如何成为“10倍效率”开发者

·快速排序（quicksort）的javascript实现

·wcf服务端运行时架构体系详解[续篇]

·wcf服务端运行时架构体系详解[下篇]

» 更多知识库文章...

china-pub 2011秋季教材巡展

china-pub 计算机绝版图书按需印刷服务

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定 这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/