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

一、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对象的集合，可以通过下标去获取某个对象中的内容，并可以通过对象名.属性名来获取对应的值。

  应用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 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