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 + "
";
}

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

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

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] + "
";
}

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 += "
" + myObj.sites[i].name + "
";
    for (j in myObj.sites[i].info) {
        x += myObj.sites[i].info[j] + "
";
    }
}

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对象$

$解决：Date对象先其转换为字符串，在js转换为Date对象$

var text = '{ "name":"Runoob", "initDate":"2013-12-14", "site":"www.runoob.com"}';
var obj = JSON.parse(text);
obj.initDate = new Date(obj.initDate);
document.getElementById("demo").innerHTML = obj.name + "创建日期: " + obj.initDate;

上下两种等价

var text = '{ "name":"Runoob", "initDate":"2013-12-14", "site":"www.runoob.com"}';
var obj = JSON.parse(text, function (key, value) {
    if (key = = "initDate") {
        return new Date(value);
    } else {
        return value;
}});
document.getElementById("demo").innerHTML = obj.name + "创建日期：" + obj.initDate;

$4.JSON不允许包含函数$

$解决：函数用字符串表示，在js转换解析为函数$

var text = '{ "name":"Runoob", "alexa":"function () {return 10000;}", "site":"www.runoob.com"}';
var obj = JSON.parse(text);
obj.alexa = eval("(" + obj.alexa + ")");
document.getElementById("demo").innerHTML = obj.name + " Alexa 排名：" + obj.alexa();

二、JSON.stringify(value[, replacer[, space]])

 1.JSON.stringify() 方法将JavaScript 对象转换为字符串
 2.value要转换的 JavaScript 值（通常为对象或数组）
  replacer用于转换结果的函数或数组。
  如果 replacer 为函数，则 JSON.stringify 将调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined，则排除成员。根对象的键是一个空字符串：""。
  如果 replacer 是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。当 value 参数也为数组时，将忽略 replacer 数组。
  space文本添加缩进、空格和换行符
 3.发送服务器数据时一般是字符串。

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

• 1.JavaScript 数据对象:
  var obj = { "name":"runoob", "alexa":10000, "site":"www.runoob.com"};

• 2.JavaScript 对象转换为 JSON 字符串、向服务器发送字符串：
  var myJSON = JSON.stringify(obj);;

总体代码：

var obj = { "name":"runoob", "alexa":10000, "site":"www.runoob.com"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;

$2：转换数据数组$

• JavaScript 数组：
  var arr = [ "Google", "Runoob", "Taobao", "Facebook" ];

• JavaScript 数组转换为 JSON 字符串、向服务器发送字符串：
  var myJSON = JSON.stringify(arr);

总体代码：

var arr = [ "Google", "Runoob", "Taobao", "Facebook" ];
var myJSON = JSON.stringify(arr);
document.getElementById("demo").innerHTML = myJSON;

$3.JSON不能存储Date对象$

$解决：Date对象先其转换为字符串，在js转换为Date对象$

var obj = { "name":"Runoob", "initDate":new Date(), "site":"www.runoob.com"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;

$4.JSON不允许包含函数$

$解决：函数用字符串表示，在js转换解析为函数$

var obj = { "name":"Runoob", "alexa":function () {return 10000;}, "site":"www.runoob.com"};
obj.alexa = obj.alexa.toString();
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;

---

JSON 使用

一、eval() 必须把文本包围在括号中

• 从 web 服务器上读取包含 JSON 语法的 JavaScript 字符串（作为文件或作为 HttpRequest）

var txt = '{ "sites" : [' +
'{ "name":"菜鸟教程" , "url":"www.runoob.com" },' +
'{ "name":"google" , "url":"www.google.com" },' +
'{ "name":"微博" , "url":"www.weibo.com" } ]}';

• eval() 函数将 JSON 数据转换为 JavaScript 对象

var obj = eval ("(" + txt + ")");

• 然后在网页中使用该数据

document.getElementById("name").innerHTML=obj.sites[0].name;
document.getElementById("url").innerHTML=obj.sites[0].url;

总体代码：

网站名: 
 
网站地址: 
 
 

---

JSONP（PHP的应用）

应用：可以让网页从别的域名（网站）那获取资料，即跨域读取数据

• 如客户想访问:
  https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction。
• 假设客户期望返回数据：
  [“customername1”,“customername2”]。
• 真正返回到客户端的数据显示为:
  callbackFunction([“customername1”,“customername2”])。

jsonp.php $服务端文件代码$

index.html $(js实现)客户端文件代码$

         //页面展示

index.html $(jQ实现)客户端文件代码$

    
    
        


         //页面展示

---

PHP JSON函数

$jso{n}_{e}ncode（）----对变量进行JSON编码$

• 语法
   json_encode（$ value [，$ options = 0]）
• 参数
  • value: 要编码的值
  • 选项:  常量组成的二进制
    - JSON_HEX_QUOT
    - JSON_HEX_TAG
    - JSON_HEX_AMP
    - JSON_HEX_APOS
    - JSON_NUMERIC_CHECK
    - JSON_PRETTY_PRINT
    - JSON_UNESCAPED_SLASHES
    - JSON_FORCE_OBJECT

实例1：PHP枚举转换为JSON格式数据

<？php
   $ arr = array（'a'=> 1，'b'=> 2，'c'=> 3，'d'=> 4，'e'=> 5）;
   回声json_encode（$ arr）;
？>

结果：
{“ a”：1，“ b”：2，“ c”：3，“ d”：4，“ e”：5}

实例2：PHP对象转换为JSON格式数据

<？php
   类别Emp {
       public $ name =“”;
       公共$爱好=“”;
       public $ birthdate =“”;
   }
   $ e = new Emp（）;
   $ e-> name =“ sachin”;
   $ e-> hobbyies =“体育”;
   $ e-> birthdate = date（'m / d / Y h：i：s a'，“ 8/5/1974 12:20:03 p”）;
   $ e-> birthdate = date（'m / d / Y h：i：s a'，strtotime（“ 8/5/1974 12:20:03”））;

   回声json_encode（$ e）;
？>

结果：
{“名称”：“ sachin”，“兴趣爱好”：“运动”，“生日”：“ 08 \ / 05 \ / 1974 12:20:03 pm”}

$jso{n}_{d}ecode（）----对JSON字符串解码，转换为PHP变量$

• 语法
   json_decode（$ json_string [，$ assoc = false [，$ depth = 512 [，$ options = 0]]]）
• 参数
  • json_string: 待解码的JSON字符串
  • assoc:    TRUE时返回副本，FALSE时返回对象
  • depth：   整数（指定递归深度）
  • 选项：常量组成的二进制
    • JSON_BIGINT_AS_STRING

实例1：PHP枚举转换为JSON格式数据

<？php
   $ json ='{“ a”：1，“ b”：2，“ c”：3，“ d”：4，“ e”：5}';

   var_dump（json_decode（$ json））;
   var_dump（json_decode（$ json，true））;
？>

结果：
object（stdClass）＃1（5）{
    [“ a”] => int（1）
    [“ b”] => int（2）
    [“ c”] => int（3）
    [“ d”] => int（4）
    [“ e”] => int（5）
}

数组（5）{
    [“ a”] => int（1）
    [“ b”] => int（2）
    [“ c”] => int（3）
    [“ d”] => int（4）
    [“ e”] => int（5）
}

$jso{n}_{l}as{t}_{e}rror（）----返回最后发生的错误$