一、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();
};