JavaScript系列学习笔记 —— JavaScript和jQuery中JSON字符串和JSON对象互相转换

目录

【第一种】JSON字符串 转 JSON对象

方式一:使用jQuery中的$.parseJSON()函数

方式二:使用JavaScript中的eval()函数

方式三:使用浏览器自带的JSON.parse()函数

【第二种】JSON对象 转 JSON字符串

JSON案例对象

方式一:浏览器自带方法JSON.stringify()函数

方式二:使用JSON官方提供的方法

方式三:jQuery封装方法$.param()函数


【第一种】JSON字符串 转 JSON对象

方式一:使用jQuery中的$.parseJSON()函数

var JSONStr = "{\"name\":\"张三\",\"sex\":\"男\"}";
var JSONStr1 = '{"name":"陈二","sex":"女"}';
var obj = $.parseJSON(JSONStr);
var obj1 = $.parseJSON(JSONStr);
console.log("姓名:"+obj.name+" , 性别:"+obj.sex);
console.log("姓名:"+obj1.name+" , 性别:"+obj1.sex);

       需要注意的是,使用jQuery的$.parseJSON函数来将JSON字符串转换为JSON对象时,对字符串的“要求”非常高,字符串里的属性必须只能使用双引号来包裹,如果不使用双引号或者只使用单引号都会引起程序报错。

       另外,如果什么都不传入,或者一个空字符串、null或undefined,$.parseJSON函数都会返回 null

方式二:使用JavaScript中的eval()函数

//【第一种形式】
var JSONStr2 = "{\"name\":\"张三\",\"sex\":\"女\"}";
var obj2 = eval('('+JSONStr2+')');
console.log("姓名:"+obj2.name+" , 性别:"+obj2.sex);

//【第二种形式】
var JSONStr3="{'name':'李四','sex':'男'}";
var obj3 = eval('('+JSONStr3+')');
console.log("姓名:"+obj3.name+" , 性别:"+obj3.sex);

//【第三种形式】
var JSONStr4="{name:'王五',sex:'女'}";
var obj4 = eval('('+JSONStr4+')');
console.log("姓名:"+obj4.name+" , 性别:"+obj4.sex);

       从上述代码的演示中我们可以看到,JavaScript的eval函数对JSON字符串的要求比较低,无论是单引号还是没有引号,eval函数都可以将其转换为JSON对象。

       另外,使用eval,有些“不安全”如果参数是一个表达式,eval() 函数将执行表达式。如果参数是Javascript语句,eval()将执行Javascript 语句。所以如果是普通的字符型的JSON字符串,可以用eval来转换,而如果是复杂的,含有对象的就不能用eval来转换了。例如下面案例所示

console.log(eval("x=10;y=20;x+y")) //30
console.log(eval("2+2")) //4
console.log(eval(x+17)) //27

       最后,需要注意的是,使用eval函数需要在字符串外包裹一对小括号。否则程序会抛出错误。这是eval函数本身的问题,由于JSON是以”{}”的方式来开始以及结束的,在JS中,它会被当成一个语句块来处理,所以必须强制性的将它转换成一种表达式。

       加上圆括号的目的是迫使eval函数在处理JavaScript代码的时候强制将括号内的表达式(expression)转化为对象,而不是作为语句 (statement)来执行。举一个例子,例如对象字面量{},如若不加外层的括号,那么eval会将大括号识别为JavaScript代码块的开始和 结束标记,那么{}将会被认为是执行了一句空语句。所以下面两个执行结果是不同的:

console.log(eval("{}")) // return undefined
console.log(eval("({})")); // return object[Object]

方式三:使用浏览器自带的JSON.parse()函数

var JSONStr31 = "{\"name\":\"张三\",\"sex\":\"女\"}";
var JSONStr32 = "{'name':'李四','sex':'男'}";
var JSONStr33 = "{name:'王五',sex:'女'}";
var JSONStr34 = '{"name":"周六","sex":"女"}';

console.log("姓名:" + JSON.parse(JSONStr31).name) //输出“张三”
console.log("姓名:" + JSON.parse(JSONStr32).name) //报错
console.log("姓名:" + JSON.parse(JSONStr33).name)   //报错
console.log("姓名:" + JSON.parse(JSONStr34).name) //输出“周六”

       Firefox,chrome,opera,等浏览器都支持JSON.parse,但IE6、IE7不支持,并且对要转换的字符串要求也比较高,必须时一个有效的JSON字符串。

 

【第二种】JSON对象 转 JSON字符串

JSON案例对象

var jsonObj = {
    persons:[
        {name:"张三",sex:"男"},
        {name:"李四",sex:"女"}
    ],
    derptment:[
        {name:"开发部",floor:5},
        {name:"品牌部",floor:3}
    ]
};

方式一:浏览器自带方法JSON.stringify()函数

var JSONStr = JSON.stringify(jsonObj);
console.log(JSONStr)
//输出结果
{"persons":[{"name":"张三","sex":"男"},{"name":"李四","sex":"女"}],"derptment":[{"name":"开发部","floor":5},{"name":"品牌部","floor":3}]}

       需要注意的是:Firefox,chrome,opera,等浏览器都支持JSON.stringify和JSON.parse,但IE6、IE7不支持。

方式二:使用JSON官方提供的方法

       需要到https://github.com/douglascrockford/JSON-js下载json2.js,然后引入到自己的网页里,就能使用下面这两个函数了:

JSON.parse()  //把字符串转换为json,
JSON.stringify() //把json转换为字符串;

       引用json2.js ,使用JSON对象进行转换,能够兼容所有浏览器

方式三:jQuery封装方法$.param()函数

       $.param()是用来把变量对象转为url格式数据的方法,但也能被我们拿来用作把json转为字符串。其语法结构为:$.param(对象,true/false)。

var JSONStr = $.param(jsonObj);
console.log(JSONStr)

var JSONStrParam = decodeURIComponent(JSONStr);
console.log(JSONStrParam)

       输出结果如下图所示:

       从输出结果可以看出,结果是经过url加密的,可以使用decodeURIComponent进行解密获得想要的结果

猜你喜欢

转载自blog.csdn.net/Rao_Limon/article/details/89145585
今日推荐