json的入门知识，基本操作，语法

---

个人blog-1： 拾忆生活
个人blog-2： 极简-拾忆生活
欢迎大家来踩，同步更新

---

JSON

• JavaScript 对象表示法、独立于语言。
• JSON 的网络媒体类型（ MIME 类型）是 application/json
• JSON 的统一标示符类型（文件类型）是 public.json
• 一种轻量级的文本数据交换格式。
• 仅支持字符串，数值，布尔值，null以及在此基础上的对象和数组。
• JavaScript 程序能够使用内建的 eval() 函数，用 JSON 数据来生成原生的 JavaScript 对象。

语法

数据在名称/值对中，由逗号分隔
对象：使用大括号{}，每个名称后面跟着一个’：’ 名/值对使用“，”分割。
数组：使用中括号[]，数组值使用“，”分割

数据类型

①数字：整数或浮点数
{ “age”:30 }

---

②字符串：在双引号""中
{ “flag”:true }

---

③逻辑值：true 或 false

---

④null
{ “runoob”:null }

---

⑤对象：在大括号{}中
{ “name”:“教程” , “url”:“www.runoob.com” }

• 对象可以包含多个 key/value（键/值）对
• key 必须是字符串，value 可以是字符串, 数字, 对象, 数组, 布尔值或 null

例子

var myObj, x;
myObj = { "name":"runoob", "alexa":10000, "site":null };

1.访问对象值

x = myObj.name;         【方法1】  
x = myObj["name"];      【方法2】  

2. 循环访问对象的属性

var myObj = { "name":"runoob", "alexa":10000, "site":null };
for (x in myObj) {
    document.getElementById("demo").innerHTML += x + "<br>";
}

3.循环访问对象的属性值

var myObj = { "name":"runoob", "alexa":10000, "site":null };
for (x in myObj) {
    document.getElementById("demo").innerHTML += myObj[x] + "<br>";
}

4.对象嵌套json对象

var myObj = {
    "name":"runoob",
    "alexa":10000,
    "sites": {
        "site1":"www.runoob.com",
        "site2":"m.runoob.com",
        "site3":"c.runoob.com"
    }
}

5.修改值（点号 . 来修改）

myObj.sites.site1 = "www.google.com";       【方法1】
myObj.sites["site1"] = "www.google.com";    【方法2】

6.删除json对象属性（delete）

delete myObj.sites.site1;                  【方法1】
delete myObj.sites["site1"]                【方法2】

【注意】
delete 运算符并不是彻底删除元素，而是删除它的值，但仍会保留空间
只是将该值置为 undefined，而不会影响数组长度，即将其变为稀疏数组

---

⑥数组：在中括号[]中

对象属性的值可以是一个数组
JSON，数组值是字符串, 数字, 对象, 数组, 布尔值或 null
JS  ，数组值是以上的 JSON 数据类型，
    也可以是JavaScript 的表达式，包括函数，日期，及 undefined

例子

{
"name":"网站",
"num":3,
"sites":[ "Google", "Runoob", "Taobao" ]
}

1.访问数组

x = myObj.sites[0];

2.循环访问数组

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

3.数组嵌套 JSON 对象中的数组

var myObj = {
    "name":"网站",
    "num":3,
    "sites": [
        { "name":"Google", "info":[ "Android", "Google 搜索", "Google 翻译" ] },
        { "name":"Runoob", "info":[ "菜鸟教程", "菜鸟工具", "菜鸟微信" ] },
        { "name":"Taobao", "info":[ "淘宝", "网购" ] }
    ]
}

4.循环访问每个数组

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

5.修改数组值

myObj.sites[1] = "Github";

6.删除数组元素

delete myObj.sites[1];

---

1.js对象数组：

var sites = [
    { "name":"runoob" , "url":"www.runoob.com" }, 
    { "name":"google" , "url":"www.google.com" }, 
    { "name":"微博" , "url":"www.weibo.com" }
]；

2.访问js对象数组：

sites[0].name；

3.修改js对象数组：

sites[0].name="教程";

---

函数

一、JSON.parse(text[, reviver])

 1.使用 JSON.parse() 方法将数据转换为 JavaScript 对象
 2.text:文本， reviver:转换结果的自定义函数
 3.接收服务器数据时一般是字符串。

$1.用于转换数据对象$

• 1.从服务器接收了以下数据（对象）：
  { "name":"runoob", "alexa":10000, "site":"www.runoob.com" }

• 2.处理数据转换为 JavaScript 对象：
  var obj = JSON.parse('{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }');

• 3.访问对象数据：
  document.getElementById("demo").innerHTML = obj.name + "：" + obj.site;

总体代码：

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        myObj = JSON.parse(this.responseText);
        document.getElementById("demo").innerHTML = myObj.name;
    }
};
xmlhttp.open("GET", "/try/ajax/json_demo.txt", true);
xmlhttp.send();

【浏览器内建对象：xmlhttp=new XMLHttpRequest();】

$2：转换数据数组$

• 从服务器接收了以下数据（数组）：
  [ "Google", "Runoob", "Taobao" ]

• 处理数据转换为 JavaScript 数组：
  document.getElementById("demo").innerHTML = myArr[1];

总体代码：

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        myArr = JSON.parse(this.responseText);
        document.getElementById("demo").innerHTML = myArr[1];
    }
};
xmlhttp.open("GET", "/try/ajax/json_demo_array.txt", true);
xmlhttp.send();

$3.JSON不能存储Date$