JSON基础教程与实际应用（附实例）
预计阅读时间：13分钟
下面我整理了一些零基础（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.csdn.net/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":"[email protected]",
"url":"./img/1.jpg"
},
{
"name":"张铁林",
"sex":"男",
"email":"[email protected]",
"url":"./img/2.jpg"
},
{
"name":"邓婕",
"sex":"女",
"email":"[email protected]",
"url":"./img/3.jpg"
},
{
"name":"张国立",
"sex":"男",
"email":"[email protected]",
"url":"./img/4.jpg"
},
{
"name":"张铁林",
"sex":"男",
"email":"[email protected]",
"url":"./img/5.jpg"
},
{
"name":"邓婕",
"sex":"女",
"email":"[email protected]",
"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>效果图：
