转载出处：https://blog.youkuaiyun.com/qq_41647999/article/details/82769761
免责声明：本人以传递知识的心态引用了一些比较好的图片或实例，原文链接已标注，若有侵权联系903131009@qq.com即删！
下面我整理了一些基础性（JSON深入浅出）的问题，再一一解答这些问题。其次，在一些比较难以理解的地方，也有举例说明，希望能够帮到您！废话不多说，请看目录：
目录
（概念整理自JSON官网：http://www.json.org.cn/）
一、JSON是什么？
JSON 是一种轻量级的数据交换格式。
二、JSON用来做什么？
JSON 是用于存储和传输数据的格式。
JSON 通常用于服务端向网页传递数据 。
三、为什么要用JSON？
-
容易阅读和编写。
-
方便机器解析和生成。
-
JSON采用独立于程序语言的文本格式，但是也使用了常用编程语言的习惯。这些特性使JSON成为理想的数据交换语言。
四、如何使用JSON？
（一） JSON基于两种结构
1.“名称/值”对的集合（A collection of name/value pairs）
不同的编程语言中，它被理解为对象（object），纪录（record），结构（struct），字典（dictionary），哈希表（hash table），有键列表（keyed list），或者关联数组 （associative array）。
2.值的有序列表（An ordered list of values）。
在大部分语言中，它被实现为数组（array），矢量（vector），列表（list），序列（sequence）。
这些都是常见的数据结构。目前，大部分编程语言都支持它们。这使得在各种编程语言之间交换同样格式的数据成为可能。
（二） JSON的形式
1.对象（object）
是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’ 对”之间使用“,”（逗号）分隔。
实例：
-
<!DOCTYPE html>
-
-
<html>
-
-
<head>
-
-
<meta charset="utf-8">
-
-
<title>DJun(blog.youkuaiyun.com/qq_41647999)
</title>
-
-
</head>
-
-
<body>
-
-
<p>
-
-
商品名称:
<span id="goodsname">
</span>
<br />
-
-
商品地址:
<span id="goodsurl">
</span>
<br />
-
-
公司 slogan:
<span id="goodsslogan">
</span>
-
-
</p>
-
-
<script>
-
-
var JSONObject= {
-
-
"name":
"大白菜",
-
-
"url":
"www.dreamstudio.top",
-
-
"slogan":
"热爱知识，传递技术！"
-
-
};
-
-
document.getElementById(
"goodsname ").innerHTML=JSONObject.name
-
-
// innerHTML在JS是双向功能：获取对象内容 或 向对象插入内容；
-
-
//在这是向id为goodsname的对象插入JSONObject.name内容
-
-
document.getElementById(
"goodsurl ").innerHTML=JSONObject.url
-
-
document.getElementById(
"goodsslogan ").innerHTML=JSONObject.slogan
-
-
</script>
-
-
</body>
-
-
</html>
2.数组（array）
是值（value）的有序集合。一个数组以“[”（左中括号）开始，“]”（右中括号）结束。值之间使用“,”（逗号）分隔。
实例：
-
var JSONObject ={
-
-
"sites": [
-
-
{
"name":
"菜鸟教程" ,
"url":
"www.runoob.com" },
-
-
{
"name":
"google" ,
"url":
"www.google.com" },
-
-
{
"name":
"微博" ,
"url":
"www.weibo.com" }
-
-
]
-
-
}
网页实现调用的方式和上述实例相同。
3.值（value）
可以是双引号括起来的字符串（string）、数值(number)、true、false、 null、对象（object）或者数组（array）。这些结构可以嵌套。
4.字符串（string）
是由双引号包围的任意数量Unicode字符的集合，使用反斜线转义。一个字符（character）即一个单独的字符串（character string）。
JSON的字符串（string）与C或者Java的字符串非常相似。
下面介绍两个函数：
| 用于将一个 JSON 字符串转换为 JavaScript 对象。 | |
| 用于将 JavaScript 值转换为 JSON 字符串。 |
5.数值（number）
与C或者Java的数值非常相似。只是JSON的数值没有使用八进制与十六进制格式。同时，可以在任意标记之间添加空白。
关于转换为 JS对象的问题
使用内建的 JavaScript eval() 用方法进行解析JSON数据来生成原生的Javascript对象。
到这里，JSON的基本知识也就到这里结束了。如果您已经学习过AJAX的话，可以在看一下以下内容哦~
附加内容：
AJAX获取JSON文件中的数据
（实例来自：https://www.cnblogs.com/zhangyongl/p/6399955.html）
Item.json
-
[
-
-
{
-
-
"name":
"张国立",
-
-
"sex":
"男",
-
-
"email":
"zhangguoli@123.com",
-
-
"url":
"./img/1.jpg"
-
-
},
-
-
{
-
-
"name":
"张铁林",
-
-
"sex":
"男",
-
-
"email":
"zhangtieli@123.com",
-
-
"url":
"./img/2.jpg"
-
-
},
-
-
{
-
-
"name":
"邓婕",
-
-
"sex":
"女",
-
-
"email":
"zhenjie@123.com",
-
-
"url":
"./img/3.jpg"
-
-
},
-
-
{
-
-
"name":
"张国立",
-
-
"sex":
"男",
-
-
"email":
"zhangguoli@123.com",
-
-
"url":
"./img/4.jpg"
-
-
},
-
-
{
-
-
"name":
"张铁林",
-
-
"sex":
"男",
-
-
"email":
"zhangtieli@123.com",
-
-
"url":
"./img/5.jpg"
-
-
},
-
-
{
-
-
"name":
"邓婕",
-
-
"sex":
"女",
-
-
"email":
"zhenjie@123.com",
-
-
"url":
"./img/6.jpg"
-
-
}
-
-
]
index.html
-
<!DOCTYPE html>
-
-
<html>
-
-
<head>
-
-
<meta charset="UTF-8">
-
-
<title>Insert title here
</title>
-
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
-
-
<script type="text/javascript" src="js/jquery-1.10.2.min.js">
</script>
-
-
<style type="text/css">
-
-
-
.p1{
-
-
font-size:
14px;
-
-
color:
#000;
-
-
}
-
-
.p2{
-
-
font-size:
12px;
-
-
color:
#b0b0b0;
-
-
}
-
-
.p3{
-
-
font-size:
14px;
-
-
color:
#ff5f19;
-
-
}
-
-
.product{
-
-
width:
100%;
-
-
position: relative;
-
-
margin:
20px
0
5px
0;
-
-
height:
100px;
-
-
background:
#fafafa;
-
-
}
-
-
-
.img{
-
-
width:
100px;
-
-
height:
100px;
-
-
float: left;
-
-
margin-right:
20px;
-
-
}
-
-
.p{
-
-
display:inline-block;
-
-
float:left;
-
-
width:
50%;
-
-
margin-top:
6px;
-
-
font-family: Microsoft YaHei;
-
-
}
-
-
.p1{
-
-
margin-top:
16px;
-
-
}
-
-
-
-
-
</style>
-
-
<script>
-
-
//页面加载 获取全部信息
-
-
$(
function(){
-
-
$.ajax({
-
-
type:
"POST",
//请求方式
-
-
url:
"item.json",
//地址，就是json文件的请求路径
-
-
dataType:
"json",
//数据类型可以为 text xml json script jsonp
-
-
success:
function(result){
//返回的参数就是 action里面所有的有get和set方法的参数
-
-
addBox(result);
-
-
}
-
-
});
-
-
/*$.get("item.json",function(result){
-
-
//result数据添加到box容器中;
-
-
addBox(result);
-
-
});*/
-
-
});
-
-
function addBox(result){
-
-
//result是一个集合,所以需要先遍历
-
-
$.each(result,
function(index,obj){
-
-
$(
"#box").append(
"<div class='product'>"+
//获得图片地址
-
-
"<div><img class='img' src="+obj[
'url']+
"/></div>"+
-
-
//获得名字
-
-
"<div class='p1 p'>"+obj[
'name']+
"</div>"+
-
-
//获得性别
-
-
"<div class='p2 p'>"+obj[
'sex']+
"</div>"+
-
-
//获得邮箱地址
-
-
"<div class='p3 p'>"+obj[
'email']+
"</div>"+
-
-
"</div>");
-
-
});
-
-
}
-
-
</script>
-
-
</head>
-
-
<body>
-
-
<!-- 构建装一个容器 -->
-
-
<div id="box">
-
-
</div>
-
-
</body>
-
-
</html>
效果图：
扫一扫
452
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
