欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

JavaScript- Json对象扁平化

程序员文章站 2022-04-14 21:37:30
...
引子:

在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对象上的所有属性进行扁平化转换。

调用例子

view sourceprint?

1 $.ajax({

2 url: "controller/action",

3 data:Convert.jsonFlat({/*your json data*/}),

4 success: function(){

5 $(this).addClass("done");

6 }

7 });

在3.0以后Mvc已经内置注册了JsonValueProviderFactory, 然后就可以直接这样调用ajax方法而不需要用js进行扁平化了: 

但是这里需要注意的是contentType 必需设置成application/json.

view sourceprint?

$.ajax({

url: "controller/action",

data:{/*your json data*/},

contentType: "application/json",

success: function(){

$(this).addClass("done");

}

});

相关标签: JavaScript Json