前端设计

JSON.parse()、JSON.stringify()以及$.parseJSON()使用

2020-08-18

在JS/JavaScript中解析JSON --- JSON.parse()、JSON.stringify()以及$.parseJSON()使用


 

现在JSON格式在web开发中非常重要,特别是在使用ajax开发项目的过程中,经常需要将后端响应的JSON格式的字符串返回到前端,前端解析成JS对象值(JSON 对象),再对页面进行渲染。

在数据传输过程中,JSON是以文本,即字符串的形式传递的,而JS操作的是JSON对象,所以,JSON对象和JSON字符串之间的相互转换是关键。


一、JSON对象(Object)和JSON字符串(String)

例如:

JSON字符串(首尾字符串带引号):

var str1 = '[{"name":"chunlynn","sex":"man" },{ "name":"linda","sex":"wowen"}]'; 

var jsonstr ='{"name":"chunlynn","sex":"man"}'; 


JSON对象(JS对象值)(首尾不带引号):

var obj = [{"name":"chunlynn","sex":"man" },{"name":"linda","sex":"wowen"}];


二、解析JSON数据的四种方法

「解析」:将JSON格式的字符串转化成JSON对象(JS对象值)的过程。也称为「反序列化」。

「序列化」:就是说把原来是对象的类型转换成字符串类型(或者更确切的说是JSON字符串类型的)。


1、jQuery的 $.parseJSON(data) 转换方式: 

描述: 接受一个标准格式的 JSON 字符串,并返回解析后的 JavaScript 值。

var jsonObj = $.parseJSON( jsonstr ); //jQuery.parseJSON(jsonstr),将JSON字符串反序列化成JSON对象


① 使用一段标准JSON字符串做为测试用例 


程序清单1:

$(document).ready(function(){

//双引号转义

    //var data = "{\"name\":\"chunlynn\" ,\"age\": 27, \"sex\": \"man\" ,\"qq\":\"277539687\"}"; 

//单引号放在最外面,就不用转义了,数字类型不用加引号

    var data = '{"name":"chunlynn" ,"age": 27, "sex": "man" ,"qq":"277539687"}'; 

    var jsondata = $.parseJSON(data);

    console.info(jsondata);

    console.info("姓名:"+jsondata.name);

    console.info("年龄:"+jsondata.age);

    console.info("性别:"+jsondata.sex);

    console.info("qq:"+jsondata.qq); // console.info("qq:"+jsondata["qq"]);也行

    console.info("age的JS类型: "+ typeof jsondata.age);

    console.info("qq的JS类型: "+ typeof jsondata.qq);

});


我们通过chrome浏览器控制台查看打印的结果: 




可以看到,var jsondata = $.parseJSON(data)这行代码将JSON字符串转化为了一个Object对象,JSON字符串内的键名成为了Object对象的属性名,我们就可以使用 jsondata.name 或者 jsondata["name"] 这样的形式来获取对应的值。同时可以看到属性的类型,age为number类型,qq为string类型。


② 如果我们解析的JSON字符串是JSON数组的形式,则有所不同,如: 


程序清单2:

 $(document).ready(function(){


    //双引号转义

    //var data = "[{\"name\":\"chunlynn\",\"age\": 27,\"qq\":\"277539687\"},

{"name":"linda","age":25,"qq":"123456789"}]"; 

    //单引号放在最外面,就不用转义了.

    var data = '[{"name":"chunlynn","age": 27,"qq":"277539687"},

{"name":"linda" ,"age": 25,"qq":"123456789"}]';  //同上放在一行

    var jsondata = $.parseJSON(data);

    console.info(jsondata);

    console.info("姓名:"+jsondata[0].name);

    console.info("年龄:"+jsondata[0].age);

    console.info("性别:"+jsondata[0].sex);

    console.info("qq:"+jsondata[0].qq);

console.info("qq:"+jsondata[0]["qq"]);

    console.info(jsondata instanceof Array); //true

    console.info("jsondata[0]的JS类型: "+ typeof jsondata[0]);

    console.info("age的JS类型: "+ typeof jsondata[0].age);

    console.info("qq的JS类型: "+ typeof jsondata[0].qq);

});


打印的结果为一个数组Array,数组的每一个元素都是一个Object对象,我们取值时就要写成 jsondata[0].name 的形式。



客户案例

关注公众号

小程序