JSON基础与实例


                                                                                       
预计阅读时间:10分钟

免责声明:本人以传递知识的心态引用了一些比较好的图片或实例,原文链接已标注,若有侵权联系[email protected]即删!

下面我整理了一些基础性(JSON深入浅出)的问题,再一一解答这些问题。其次,在一些比较难以理解的地方,也有举例说明,希望能够帮到您!废话不多说,请看目录:

目录

JSON基础与实例
<https://blog.csdn.net/qq_41647999/article/details/82769761#JSON%E5%9F%BA%E7%A1%80%E6%95%99%E7%A8%8B%E4%B8%8E%E5%AE%9E%E9%99%85%E5%BA%94%E7%94%A8%EF%BC%88%E9%99%84%E5%AE%9E%E4%BE%8B%EF%BC%89>

一、JSON是什么?
<https://blog.csdn.net/qq_41647999/article/details/82769761#%E4%B8%80%E3%80%81JSON%E6%98%AF%E4%BB%80%E4%B9%88%EF%BC%9F>

二、JSON用来做什么?
<https://blog.csdn.net/qq_41647999/article/details/82769761#%E4%BA%8C%E3%80%81JSON%E7%94%A8%E6%9D%A5%E5%81%9A%E4%BB%80%E4%B9%88%EF%BC%9F>

三、为什么要用JSON?
<https://blog.csdn.net/qq_41647999/article/details/82769761#%E4%B8%89%E3%80%81%E4%B8%BA%E4%BB%80%E4%B9%88%E8%A6%81%E7%94%A8JSON%EF%BC%9F>

四、如何使用JSON?
<https://blog.csdn.net/qq_41647999/article/details/82769761#%E5%9B%9B%E3%80%81%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8JSON%EF%BC%9F>

(一) JSON基于两种结构
<https://blog.csdn.net/qq_41647999/article/details/82769761#%EF%BC%88%E4%B8%80%EF%BC%89%20JSON%E5%9F%BA%E4%BA%8E%E4%B8%A4%E7%A7%8D%E7%BB%93%E6%9E%84>

(二) JSON的形式
<https://blog.csdn.net/qq_41647999/article/details/82769761#%EF%BC%88%E4%BA%8C%EF%BC%89%20JSON%E7%9A%84%E5%BD%A2%E5%BC%8F>

1.对象(object)
<https://blog.csdn.net/qq_41647999/article/details/82769761#1.%E5%AF%B9%E8%B1%A1%EF%BC%88object%EF%BC%89>

2.数组(array)
<https://blog.csdn.net/qq_41647999/article/details/82769761#2.%E6%95%B0%E7%BB%84%EF%BC%88array%EF%BC%89>

3.值(value)
<https://blog.csdn.net/qq_41647999/article/details/82769761#3.%E5%80%BC%EF%BC%88value%EF%BC%89>

4.字符串(string)
<https://blog.csdn.net/qq_41647999/article/details/82769761#4.%E5%AD%97%E7%AC%A6%E4%B8%B2%EF%BC%88string%EF%BC%89>

5.数值(number)
<https://blog.csdn.net/qq_41647999/article/details/82769761#5.%E6%95%B0%E5%80%BC%EF%BC%88number%EF%BC%89>

关于转换为 JS对象的问题
<https://blog.csdn.net/qq_41647999/article/details/82769761#%E5%85%B3%E4%BA%8E%E8%BD%AC%E6%8D%A2%E4%B8%BA%20JS%E5%AF%B9%E8%B1%A1%E7%9A%84%E9%97%AE%E9%A2%98>

附加内容:
<https://blog.csdn.net/qq_41647999/article/details/82769761#%E9%99%84%E5%8A%A0%E5%86%85%E5%AE%B9%EF%BC%9A>

AJAX获取JSON文件中的数据
<https://blog.csdn.net/qq_41647999/article/details/82769761#AJAX%E8%8E%B7%E5%8F%96JSON%E6%96%87%E4%BB%B6%E4%B8%AD%E7%9A%84%E6%95%B0%E6%8D%AE>

Item.json
<https://blog.csdn.net/qq_41647999/article/details/82769761#Item.json>

index.html
<https://blog.csdn.net/qq_41647999/article/details/82769761#index.html>

(概念整理自JSON官网:http://www.json.org.cn/ <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.parse() <http://www.runoob.com/js/javascript-json-parse.html>

用于将一个 JSON 字符串转换为 JavaScript 对象。


JSON.stringify() <http://www.runoob.com/js/javascript-json-stringify.html>

用于将 JavaScript 值转换为 JSON 字符串。

 

5.数值(number)

与C或者Java的数值非常相似。只是JSON的数值没有使用八进制与十六进制格式。同时,可以在任意标记之间添加空白。

关于转换为 JS对象的问题

使用内建的 JavaScript eval() 用方法进行解析JSON数据来生成原生的Javascript对象。

到这里,JSON的基本知识也就到这里结束了。如果您已经学习过AJAX的话,可以在看一下以下内容哦~

附加内容:

AJAX获取JSON文件中的数据

(实例来自:https://www.cnblogs.com/zhangyongl/p/6399955.html
<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>
效果图: