JSON学习笔记（三、使用）

最新推荐文章于 2021-03-10 02:51:54 发布

原创最新推荐文章于 2021-03-10 02:51:54 发布 · 613 阅读

2 ·

CC 4.0 BY-SA版权

JSON 专栏收录该内容

9 篇文章

订阅专栏

本文深入探讨了JSON在Web开发中的应用，包括如何将JSON格式的字符串转换为JavaScript对象，以及如何将JavaScript对象转化为JSON字符串。同时，文章还介绍了如何在网页中使用JSON对象，并提供了遍历JSON对象和数组的方法。

常用场景

JSON经常应用到的场景是：在后台应用程序中将响应数据封装成JSON格式，传到前台页面之后，需要将JSON格式转换为JavaScript对象，然后在网页中使用该数据。

字符串转化为json对象

这是一个json格式的字符串，当然实际应用场景中后台传来的json是作为文件或作为 HttpRequest

var txt = '{ "sites" : [' +
'{ "name":"baidu" , "url":"www.baidu.com" },' +
'{ "name":"google" , "url":"www.google.com" },' +
'{ "name":"微博" , "url":"www.weibo.com" } ]}';

由于 JSON 语法是 JavaScript 语法的子集，JavaScript 函数 eval() 可用于将 JSON 文本转换为 JavaScript 对象。
eval() 函数使用的是 JavaScript 编译器，可解析 JSON 文本，然后生成 JavaScript 对象。必须把文本包围在括号中，这样才能避免语法错误：

var obj = eval ("(" + txt + ")");

在网页中使用json对象：

var txt = '{ "sites" : [' +
'{ "name":"百度" , "url":"www.baidu.com" },' +
'{ "name":"google" , "url":"www.google.com" },' +
'{ "name":"微博" , "url":"www.weibo.com" } ]}';
 
var obj = eval ("(" + txt + ")");
 
document.getElementById("name").innerHTML=obj.sites[0].name 
document.getElementById("url").innerHTML=obj.sites[0].url

JSON转化为字符串

json是js对象，直接打印的话里面是看不到东西的，所以要把它转化成字符串，直接用JSON.stringify 函数就行了。

var urlJson = {"name":"百度","url":"www.baidu.com"};
var urlString = JSON.stringify(hero)
document.write("这是一个json 字符串："+ urlString );

遍历在很多场景都用得到。

JSON对象遍历

可以使用 for-in 来循环对象的属性：

var site={"name":"百度","url":"www.baidu.com"};
for (x in site) {
    document.getElementById("demo").innerHTML += x + "<br>";
}

JSON数组遍历

for-in

var json = [
    {"name":"第1条"},
    {"name":"第2条"},
    {"name":"第3条"}
]
for( i in json){
    alert(json[i].name);
}

for 循环

var json = [
    {"name":"第1条"},
    {"name":"第2条"},
    {"name":"第3条"}
]
for( i=0;i<json.length;i++){
    alert(json[i].name);
}