现在的位置: 首页 > 综合 > 正文

JSON对象和字符串之间的转换

2018年05月20日 ⁄ 综合 ⁄ 共 5040字 ⁄ 字号 评论关闭

在开发的过程中,如果对于少量参数的前后台传递,可以直接采用ajax的data函数,按json格式传递,后台Request即可,但有的时候,需要传递多个参数,这样后台

接受的时候Request多个很麻烦,此时要按照类的格式或者 集合的形式进行传递。

例如:前台按类的格式传递JSON对象:

var jsonUserInfo = "{\"TUserName\":\"" + userName + "\",\"TInterest\":\"" + interest + "\",\"TSex\":\"" + sex + "\",\"TCity\":\"" + city + "\",\"TDetail\":\"" + detail + "\"}";

如拼出的jsonUserInfo 无转义符号,需要var jsonArrayFinal = JSON.stringify(jsonArray);进行转换后再传递。

$.ajax(
                    {
                        type: "post",
                        url: "ReceiveHandler1.ashx",
                        data: { userInfo: jsonUserInfo, flag: "123456", key: "654321" },
                        dataType: "text",
                        success: function(data) {
                            $("#divShow").html(data);
                        }
 });

如果前台传递多个类似格式的JSON数组,也就是集合类型:

例如:

[{"name":"a"},{"name","b"},{"name","c"}],则无法传递,此时必须使用JSON.stringify将数组对象转换成字符串,再进行AJAX传递即可。


比如我有两个变量,我要将a转换成字符串,将b转换成JSON对象:

     var a={"name":"tom","sex":"男","age":"24"};
     
     var b='{"name":"Mike","sex":"女","age":"29"}';

在Firefox,chrome,opera,safari,ie9,ie8等高级浏览器直接可以用JSON对象的stringify()和parse()方法。

JSON.stringify(obj)将JSON转为字符串。JSON.parse(string)将字符串转为JSON格式;

上面的转换可以这么写:
     var a={"name":"tom","sex":"男","age":"24"};
     
     var b='{"name":"Mike","sex":"女","age":"29"}';
     
    var aToStr=JSON.stringify(a);
     
     var bToObj=JSON.parse(b);
     
     alert(typeof(aToStr));  //string
     
     alert(typeof(bToObj));//object

JSON.stringify()

ie8(兼容模式),ie7和ie6没有JSON对象,不过http://www.json.org/提供了一个json.js,这样ie8(兼容模式),ie7和ie6就可以支持JSON对象以及其stringify()和parse()方法;你可以在https://github.com/douglascrockford/JSON-js上获取到这个js,一般现在用json2.js。

ie8(兼容模式),ie7和ie6可以使用eval()将字符串转为JSON对象,
    var c='{"name":"Mike","sex":"女","age":"29"}';
     var cToObj=eval("("+c+")");
     alert(typeof(cToObj));

jQuery中也有将字符串转为JSON格式的方法jQuery.parseJSON( json ),接受一个标准格式的 JSON 字符串,并返回解析后的 JavaScript (JSON)对象。当然如果有兴趣可以自己封装一个jQuery扩展,jQuery.stringifyJSON(obj)将JSON转为字符串。

====================================================================================================================================

另外,将后台程序(如php)发送过来的json数据转化为javascript的数组或者对象的方法十分简单,代码如下:

// 假设后台发送的json数据为 '{a:2,b:1}' 存储于str中
var data = eval( '(' + str + ')' );

然而想将一个javascript对象转化为json格式的字符串却并不那么简单,特别是对象的属性值递归包含一个对象时(如 var obj={a:[2,3],b:{m:[3,4],n:2} } ),那么有没有什么方法将obj转化为json格式的字符串呢?

当然你可以自己写一个函数,递归遍历一个对象并将其转化为json格式的字符串,对于大部分人来说这有些困难并容易出错。幸好已经有人做好了这件事情,你只用包含一段javascript代码即可。

json2.js

<!doctype html>
<html>
<body>
<script src="json2.js"></script>
<script>
var obj={a:[2,3],b:{m:[3,4],n:2} };
var jsonStr = JSON.stringify( obj );
alert(jsonStr);
//将显示 {"a":[2,3],"b":{"m":[3,4],"n":2}}
</script>
</body>
</html>

假如有两个变量,我要将a转换成字符串,将b转换成JSON对象:

var a={"name":"tom","sex":"男","age":"24"};
var b='{"name":"Mike","sex":"女","age":"29"}';

在Firefox,chrome,opera,safari,ie9,ie8等高级浏览器直接可以用JSON对象的stringify()和parse()方法。JSON.stringify(obj)将JSON转为字符串。JSON.parse(string)将字符串转为JSON格式;

上面的转换可以这么写:

var a={"name":"tom","sex":"男","age":"24"};
var b='{"name":"Mike","sex":"女","age":"29"}';
var aToStr=JSON.stringify(a);
var bToObj=JSON.parse(b);
alert(typeof(aToStr));  //string
alert(typeof(bToObj));	//object

JSON.stringify()

ie8(兼容模式),ie7和ie6没有JSON对象,不过http://www.json.org/提供了一个json.js,这样ie8(兼容模式),ie7和ie6就可以支持JSON对象以及其stringify()和parse()方法;你可以在https://github.com/douglascrockford/JSON-js上获取到这个js,一般现在用json2.js。ie8(兼容模式),ie7和ie6可以使用eval()将字符串转为JSON对象:

var c='{"name":"Mike","sex":"女","age":"29"}';
var cToObj=eval("("+c+")");
alert(typeof(cToObj));

jQuery中也有将字符串转为JSON格式的方法jQuery.parseJSON( json ),接受一个标准格式的 JSON 字符串,并返回解析后的 JavaScript (JSON)对象。当然如果有兴趣可以自己封装一个jQuery扩展,jQuery.stringifyJSON(obj)将JSON转为字符串。

JSON.stringify(jsonobj),本来是最简便的方法,可是存在浏览器兼容问题(仅适用于IE8+,Chrome 1+,FF 3+)。下面再介绍一个方法:

var O2String = function (O) {
       //return JSON.stringify(jsonobj);

       var S = [];
       var J = "";
       if (Object.prototype.toString.apply(O) === '[object Array]') {
           for (var i = 0; i < O.length; i++)
               S.push(O2String(O[i]));
           J = '[' + S.join(',') + ']';
       }
       else if (Object.prototype.toString.apply(O) === '[object Date]') {
           J = "new Date(" + O.getTime() + ")";
       }
       else if (Object.prototype.toString.apply(O) === '[object RegExp]' || Object.prototype.toString.apply(O) === '[object Function]') {
           J = O.toString();
       }
       else if (Object.prototype.toString.apply(O) === '[object Object]') {
           for (var i in O) {
               O[i] = typeof (O[i]) == 'string' ? '"' + O[i] + '"' : (typeof (O[i]) === 'object' ? O2String(O[i]) : O[i]);
               S.push(i + ':' + O[i]);
           }
           J = '{' + S.join(',') + '}';
       }

       return J;
};

使用方法也很简单:

var jsonStr = O2String(
             [
                 {
                     "Page": "plan",
                     "Custom":
                     [
                         {
                             "ItemName": "CustomLabel1",
                             "ItemContent": 1, 
                             "IsItem": true,
                             "ItemDate": new Date(1320774905467),
                             "ItemReg": /[\w]*?/gi,
                             "ItemFunc": function () { alert("ItemFunc"); }
                         },
                         {
                             "ItemName": "CustomLabel1",
                             "ItemContent": 1,
                             "IsItem": true,
                             "ItemDate": new Date(1320774905467),
                             "ItemReg": /[\w]*?/gi,
                             "ItemFunc": function () { alert("ItemFunc"); }
                         }
                     ]
                 },
                 {
                     "Page": "project",
                     "Custom":
                     [
                         {
                             "ItemName": "CustomLabel2",
                             "ItemContent": 2,
                             "IsItem": false,
                             "ItemDate": new Date(1320774905467),
                             "ItemReg": /[\w]*?/gi,
                             "ItemFunc": function () { alert("ItemFunc"); }
                         },
                         {
                             "ItemName": "CustomLabel2",
                             "ItemContent": 2,
                             "IsItem": false,
                             "ItemDate": new Date(1320774905467),
                             "ItemReg": /[\w]*?/gi,
                             "ItemFunc": function () { alert("ItemFunc"); }
                         }
                     ]
                 }
             ]
         );
         alert(jsonStr);
         var jsonObj = eval("(" + jsonStr + ")");
alert(jsonObj.length);

本文转载地址

抱歉!评论已关闭.