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