JSON相关

最新推荐文章于 2024-09-22 11:17:00 发布

蓝色清晨_

最新推荐文章于 2024-09-22 11:17:00 发布

阅读量223

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/yingleiming/article/details/75258603

版权

JSON: JavaScript Object Notation(JavaScript 对象表示法)

JSON 是存储和交换文本信息的语法。类似 XML。
JSON 比 XML 更小、更快，更易解析。
什么是 JSON ？

JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
JSON 是轻量级的文本数据交换格式
JSON 独立于语言 *
JSON 具有自我描述性，更易理解

JSON 使用 Javascript语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。目前非常多的动态（PHP，JSP，.NET）编程语言都支持JSON。

JSON 文本格式在语法上与创建 JavaScript 对象的代码相同。由于这种相似性，无需解析器，JavaScript 程序能够使用内建的 eval() 函数，用 JSON 数据来生成原生的 JavaScript 对象。

与 XML 相同之处

JSON 是纯文本
JSON 具有"自我描述性"（人类可读）
JSON 具有层级结构（值中存在值）
JSON 可通过 JavaScript 进行解析
JSON 数据可使用 AJAX 进行传输

与 XML 不同之处

没有结束标签
更短
读写的速度更快
能够使用内建的 JavaScript eval() 方法进行解析
使用数组
不使用保留字

为什么使用 JSON？

对于 AJAX 应用程序来说，JSON 比 XML 更快更易使用：
使用 XML

读取 XML 文档
使用 XML DOM 来循环遍历文档
读取值并存储在变量中

使用 JSON

读取 JSON 字符串
用 eval() 处理 JSON 字符串

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>JavaScript 创建 JSON 对象</title>
</head>
<body>
    <p>
        网站名称：<span id="webName"></span><br />
        网站地址: <span id="webAddress"></span><br />
        网站口号: <span id="webTitle"></span>
    </p>
    <script type="text/javascript">
        var JSONObject={
            "name":"谷歌",
            "address":"www.google.com",
            "title":"做没有广告的搜索引擎"
        }
        document.getElementById("webName").innerHTML=JSONObject.name;
        document.getElementById("webAddress").innerHTML=JSONObject.address;
        document.getElementById("webTitle").innerHTML=JSONObject.title;
    </script>
</body>
</html>

JSON 语法

JSON 语法是 JavaScript 语法的子集。

JSON 语法规则

数据在名称/值对中"name" : "菜鸟教程"
数据由逗号分隔
大括号保存对象
中括号保存数组

JSON 值

JSON 值可以是：

数字（整数或浮点数）
字符串（在双引号中）
逻辑值（true 或 false）
数组（在中括号中）
对象（在大括号中）

null

JSON 数字

JSON 数字可以是整型或者浮点型：{ “age”:30 }

JSON 对象

对象可以包含多个名称/值对：

{ “name”:”菜鸟教程” , “url”:”www.runoob.com” }

JSON 数组

数组可包含多个对象：

{
“sites”: [
{ “name”:”菜鸟教程” , “url”:”www.runoob.com” },
{ “name”:”google” , “url”:”www.google.com” },
{ “name”:”微博” , “url”:”www.weibo.com” }
]
}
在上面的例子中，对象 “sites” 是包含三个对象的数组。每个对象代表一条关于某个网站（name、url）的记录。

JSON 布尔值

JSON 布尔值可以是 true 或者 false：
{ “flag”:true }

JSON null

JSON 可以设置 null 值：

{ “runoob”:null }

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>JavaScript 创建 JSON 对象</title>
</head>
<body>
    <h2>JavaScript创建 JSON 对象</h2>
    <p>
        第一个网站名称：<span id="name1"></span><br />
        第一个网站修改之后的名称: <span id="name2"></span><br />
    </p>
    <script type="text/javascript">
        var sites=[
            {"name":"runoob","url":"www.runoob.com"},
            {"name":"google","url":"www.google.com"},
            {"name":"微博","url":"www.weibo.com"}
        ];
        document.getElementById("name1").innerHTML=sites[1].name;
//      修改网站名称
        sites[1].name="谷歌";
        document.getElementById("name2").innerHTML=sites[1].name;
    </script>
</body>
</html>

JSON 文件

JSON 文件的文件类型是 ".json"
JSON 文本的 MIME 类型是 "application/json"

JSON 数组

数组作为 JSON 对象
[ “Google”, “Runoob”, “Taobao” ]
JSON 数组在中括号中书写。

JSON 中数组值必须是合法的 JSON 数据类型（字符串, 数字, 对象, 数组, 布尔值或 null）。

JavaScript 中，数组值可以是以上的 JSON 数据类型，也可以是 JavaScript 的表达式，包括函数，日期，及 undefined。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>访问 JOSN 对象数组值</title>
</head>
<body>

<p>访问 JOSN 对象数组值。</p>

<p id="demo"></p>

<script>

var myObj, x;
myObj = {
    "name":"网站",
    "num":3,
    "sites":[ "Google", "Runoob", "Taobao" ]
}
x = myObj.sites[0];
document.getElementById("demo").innerHTML = x;

</script>

</body>
</html>

循环数组

你可以使用 for-in 来访问数组：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>sub 与 sup</title>
</head>
<body>
    <p>for-in访问循环数组</p>
    <div id="demo"></div>
    <script type="text/javascript">
        var myObject,i,x="";
        myObject={
            "name":"网站",
            "num":3,
            "sites":["baidu","google","sougou"]
        };
        for(i in myObject.sites){
            x+=myObject.sites[i]+"<br>";
        }
        document.getElementById("demo").innerHTML=x;
    </script>

</body>
</html>

嵌套 JSON 对象中的数组

JSON 对象中数组可以包含另外一个数组，或者另外一个 JSON 对象：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>sub 与 sup</title>
</head>
<body>
    <p>循环内嵌套数组</p>
    <div id="demo"></div>
    <script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        var myObject,i,j,x="";
        myObject={
            "name":"网站",
            "num":3,
            "sites":[
                {"name":"google","info":["android","google搜索","google翻译"]},
                {"name":"runboo","info":["菜鸟教程","菜鸟工具","菜鸟微信"]},
                {"name":"taobao","info":["淘宝","网购"]}
            ]
        };
        for(i in myObject.sites){
            x+="<h1>"+myObject.sites[i].name+"</h1>";
            for(j in myObject.sites[i].info){
                x+=myObject.sites[i].info[j]+"<br>";
            }
        }
        document.getElementById("demo").innerHTML=x;

    </script>

</body>
</html>

修改数组值

你可以使用索引值来修改数组值：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>修改 JSON 对象数组值。</p>

<p id="demo"></p>

<script>

var myObj, i, x = "";
myObj = {
    "name":"网站",
    "num":3,
    "sites":[ "Google", "Runoob", "Taobao" ]
};
 myObj.sites[1] = "Github";

for (i in myObj.sites) {
    x += myObj.sites[i] + "<br>";
}

document.getElementById("demo").innerHTML = x;

</script>

</body>
</html>

删除数组元素

我们可以使用 delete 关键字来删除数组元素：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>删除数组元素</p>

<p id="demo"></p>

<script>
var myObj, i, x = "";
myObj = {
    "name":"网站",
    "num":3,
    "sites":[ "Google", "Runoob", "Taobao" ]
};
delete myObj.sites[1];

for (i in myObj.sites) {
    x += myObj.sites[i] + "<br>";
}

document.getElementById("demo").innerHTML = x;

</script>

</body>
</html>