JSON.stringify()与JSON.parse()的区别与使用

最新推荐文章于 2024-10-26 10:22:21 发布

原创最新推荐文章于 2024-10-26 10:22:21 发布 · 828 阅读

4 ·

CC 4.0 BY-SA版权

Java 专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了JavaScript中的JSON.stringify()和JSON.parse()方法，包括它们的功能、使用示例和实际应用。JSON.stringify()用于将JavaScript对象转换为字符串，而JSON.parse()则用于将JSON字符串还原为JavaScript对象。文中通过代码示例展示了如何在数组中处理多个JSON字符串，并在前后端交互中应用这两个方法。此外，还分享了在实际项目中如何在后端生成JSON字符串并由前端解析的案例。

一、JSON.stringify()：

JSON 通常用于与服务端交换数据。

在向服务器发送数据时一般是字符串。

我们可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。

var data='{"name":"goatling"}'

JSON.parse(data)

结果是：

name:"goatling"

二、JSON.parse()：

JSON 通常用于与服务端交换数据。

在接收服务器数据时一般是字符串。

我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。

var data={name:'goatling'}

JSON.stringify(data)

结果是：

'{"name":"goatling"}'

注意：JSON字符串是键值都是用双引号引起来的数据。

三、示例与应用：

示例1：一个数组中包含多个JSON字符串--->jsonStr，调用JSON.parse()方法可以将其转换为JSON对象--->jsonObj,此时的jsonObj相当于一个包含多个JSON对象的集合，可以通过下标去获取某个对象中的内容，并可以通过对象名.属性名来获取对应的值。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<script>

function init(){

var jsonStr = '[{"name":"zxl","upwd":"111"},{"name":"zx","upwd":"222"}]';

console.log(jsonStr);

var jsonObj = JSON.parse(jsonStr);

for(var i = 0;i < jsonObj.length; i++){

var temp = jsonObj[i];

console.log(temp.name + "-------" + temp.upwd);

}

}

</script>

</head>

<body onload="init()">



</body>

</html>

应用1：

后端：使用JSONObject创建多个JSON对象，然后存放在集合（ArrayList 或 Vector）中，因为后端需要返回JSON字符串给前端来进行通信，所以将集合数据通过 JSON.toJSONString() 转换为 JSON字符串。这个操作相当于在一个数组中存放多个JSON字符串，等同于上述所讲的 jsonStr 。

前端：使用 JSON.parse(event.data) 将返回值转换为JSON对象，然后接着对需要的数据通过下标进行获取即可。这个操作相当于上述的前端代码。

总结：这个应用给我们以后的开发提供了一个思路，就是：当我们在后端要向前端返回多个JSON字符串时，可以将其统一放到一个ArrayList 或 Vector中，然后前端接收时通过转换，就可以根据需求做相应的操作了。

下面贴一下我在项目中的代码，更好的帮助大家理解：

后端：

public class TcountService {



    TcountDao td = new TcountDao();



    public String getCountByAge() {

//        System.out.println("进入service层");

        Vector<JSONObject> vector = new Vector<>();

        // jsonObject需要三个属性：百分比 * 100、人数、描述，分别对应 p1,p2,p3

        // 计算会员总人数

        int total = td.getCount().getCount();

        // 循环计算各个年龄段的人数，并给jsonObject赋予相对应的属性

        for (int i = 0; i < 7; i++) {

            JSONObject jsonObject = new JSONObject();

            if (i == 6) {

                // 存放p3属性

                jsonObject.put("p3", i * 10 + "岁以上");

            } else {

                int age1 = i * 10;

                int age2 = (i + 1) * 10;

                // 存放p3属性

                jsonObject.put("p3", age1 + "~" + age2 + "岁");

            }



            Tcount temp = td.getCountByAge(i);

            int tempCount = temp.getCount();

            // 存放p2属性

            jsonObject.put("p2", tempCount);

            double d1 = (double) tempCount;

            double d2 = (double) total;

            double d3 = d1 / d2;

            d3 = d3 * 100;

            // 存放p1属性

            jsonObject.put("p1", d3);

            vector.add(jsonObject);

        }

//                System.out.println(JSON.toJSONString(vector));

        return JSON.toJSONString(vector);

    }

}

前端：

function pushMsg(){

// 建立连接

w = new WebSocket("ws://localhost:8765/point");

w.onopen = function(){



};

// 接收服务端发送过的消息

w.onmessage = function(event){

// 这里需要将JSON字符串转换为JSON对象，接下来我们就可以通过下标获取对应的对象并通过对象.属性名 获取想要的值了

var res = JSON.parse(event.data);

// console.log(res);

dataSource=[

['score', 'amount', 'product'],

];



for(var i=0;i<res.length;i++){

var temp = res[i];

var arr = [];

arr.push(temp.p1);

arr.push(temp.p2);

arr.push(temp.p3);

dataSource.push(arr);

}

// console.log(dataSource);

init();

};