ajax&json-w3school（2020.2.13）【js json】-CSDN博客

本文链接：https://blog.csdn.net/mus123/article/details/104297289

二、js json
（一）json简介
1.JSON: JavaScript Object Notation（JavaScript 对象标记法）。
JSON 是一种存储和交换数据的语法。
JSON 是通过 JavaScript 对象标记法书写的文本。
JSON 属于文本，并且我们能够把任何 JavaScript 对象转换为 JSON，然后将 JSON 发送到服务器。
我们也能把从服务器接收到的任何 JSON 转换为 JavaScript 对象。
以这样的方式，我们能够把数据作为 JavaScript 对象来处理，无需复杂的解析和转译。
什么是 JSON？
·JSON 指的是 JavaScript 对象标记法（JavaScript Object Notation）
·JSON 是一种轻量级的数据交换格式
·JSON 具有自我描述性且易于理解
·JSON 独立于语言*
JSON 使用 JavaScript 语法，但是 JSON 格式是纯文本的。
文本可被任何编程语言作为数据来读取和使用。

2.字符串化JSON.stringify()
（1）如果您的数据存储在 JavaScript 对象中，您可以把该对象转换为 JSON，然后将其发送到服务器。

var myObj = { name:"Bill Gates",  age:62, city:"Seattle" };
var myJSON =  JSON.stringify(myObj);
window.location = "demo_json.php?x=" + myJSON;

（2）可以对 JavaScript 数组进行字符串化

var arr = [ "Bill Gates", "Steve Jobs", "Elon Musk" ];
var myJSON =  JSON.stringify(arr);
document.getElementById("demo").innerHTML = myJSON;

3.解析数据JSON.parse()
（1）如果您以 JSON 格式接收到数据，您能够将其转换为 JavaScript 对象：

var myJSON = '{ "name":"Bill Gates",  "age":62, "city":"Seattle" }';
var myObj =  JSON.parse(myJSON);
document.getElementById("demo").innerHTML = myObj.name;

（2）JSON 的常规用途是同 web 服务器进行数据传输。
在从 web 服务器接收数据时，数据永远是字符串。
通过 JSON.parse() 解析数据，这些数据会成为 JavaScript 对象。
请使用 XMLHttpRequest 从服务器获取数据：

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", "json_demo.txt", true);
xmlhttp.send();
"json_demo.txt"
{
    "name":"Bill Gates",
    "age":62,
    "Cars":[
        { "car":"porsche", "model":"911" },
        { "car":"BMW", "model":"M5" },
        { "car":"Volvo", "model":"XC90" }
    ]
}

（3）结合php使用

obj = { "table":"customers", "limit":10 };
dbParam = JSON.stringify(obj);
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
     if (this.readyState == 4 && this.status == 200) {
        document.getElementById("demo").innerHTML  = this.responseText;
    }
};
xmlhttp.open("GET",  "demo_json_db.php?x=" + dbParam, true);
xmlhttp.send();

PHP 文件解释：
·将请求转换为对象，使用 PHP 函数 json_decode()。
·访问数据库，用所请求的数据填充数组。
·把数组添加到对象，使用 json_encode() 函数以 JSON 返回该对象。

<?php
header("Content-Type: application/json; charset=UTF-8");
$obj =  json_decode($_GET["x"], false);
 
$conn = new mysqli("myServer", "myUser", "myPassword", "Northwind");
$result = $conn->query("SELECT name FROM ".$obj->$table." LIMIT ".$obj->$limit);
$outp = array();
$outp = $result->fetch_all(MYSQLI_ASSOC);

echo json_encode($outp);
?>

4.存储数据
在存储数据时，数据必须是某种具体的格式，并且无论您选择在何处存储它，文本永远是合法格式之一。
JSON 让 JavaScript 对象存储为文本成为可能。
把数据存储在本地存储中

//存储数据：
myObj = { name:"Bill Gates",  age:62, city:"Seattle" };
myJSON =  JSON.stringify(myObj);
localStorage.setItem("testJSON", myJSON);

//接收数据：
text = localStorage.getItem("testJSON");
obj =  JSON.parse(text);
document.getElementById("demo").innerHTML = obj.name;

5.XML和JSON
（1）类似 XML
• JSON 是纯文本
• JSON 具有“自我描述性”（人类可读）
• JSON 具有层级结构（值中存在值）
• JSON 可通过 JavaScript 进行解析
• JSON 数据可使用 AJAX 进行传输
（2）相比 XML 的不同之处
• 没有结束标签
• 更短
• 读写的速度更快
• 能够使用内建的 JavaScript eval() 方法进行解析
• 使用数组
• 不使用保留字
（3）为什么使用 JSON？
对于 AJAX 应用程序来说，JSON 比 XML 更快更易使用：
·使用 XML
读取 XML 文档
使用 XML DOM 来循环遍历文档
读取值并存储在变量中

<employees>
    <employee>
         <firstName>Bill</firstName>
         <lastName>Gates</lastName>
     </employee>
     <employee>
         <firstName>Steve</firstName>
         <lastName>Jobs</lastName>
     </employee>
     <employee>
         <firstName>Elon</firstName>
         <lastName>Musk</lastName>
     </employee>
</employees>

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

{"employees":[
    { "firstName":"Bill", "lastName":"Gates" },
    { "firstName":"Steve", "lastName":"Jobs" },
    { "firstName":"Elon", "lastName":"Musk" }
]}

（二）json语法
1.JSON 语法是 JavaScript 语法的子集
• 数据在名称/值对中
• 数据由逗号分隔
• 花括号容纳对象
• 方括号容纳数组
2. JSON 数据- 名称和值
JSON 数据写为名称/值对。
名称/值由字段名称构成，后跟冒号和值
JSON 名称需要双引号。而 JavaScript 名称不需要。
JSON – 求值为 JavaScript 对象
JSON 格式几乎等同于 JavaScript 对象。
在 JSON 中，键必须是字符串，由双引号包围，字符串方法时最外边用单引号括起：

'{ "name":"Bill Gates" } '//JSON

在 JavaScript 中，键可以是字符串、数字或标识符名称：

{ name:"Bill Gates" }// JavaScript

3.JSON值
在 JSON 中，值必须是以下数据类型之一：
• 字符串

{ "name":"John" }

• 数字

{ "age":30 }

• 对象（JSON 对象）
{

"employee":{ "name":"Bill Gates", "age":62, "city":"Seattle" }

}
• 数组
{

"employees":[ "Bill", "Steve", "David" ]

}
• 布尔

{ "sale":true }

• null

{ "middlename":null }

外加其他有效的 JavaScript 表达式，包括：
• 函数
JSON 中不允许函数。
JSON.parse()时候如果您需要包含函数，请把它写作字符串。
稍后您可以通过eval("(" +方法+ “)”)把它转换回函数：
把字符串转换为函数：

var text =  '{ "name":"Bill Gates", "age":"function () {return 62;}", "city":"Seattle"}';
var obj = JSON.parse(text);
obj.age = eval("(" + obj.age + ")");

JSON.stringify() 函数将从 JavaScript 对象删除任何函数，包括键和值
如果您需要函数，在运行 JSON.stringify() 函数前，将函数转换为字符串

var obj =  { "name":"Bill Gates", "age":function () {return 62;}, "city":"Seattle"};
obj.age = obj.age.toString();//先转换
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;

应该避免在 JSON 中使用函数，函数会丢失它们的作用域

• 日期

var text =  '{ "name":"Bill Gates", "birth":"1955-10-28", "city":"Seattle"}';
var obj = JSON.parse(text);
obj.birth = new Date(obj.birth);

或者您可以已使用 JSON.parse() 函数的第二个参数，被称为 reviver。
这个 reviver 参数是回调函数，在返回值之前，它会检查每个属性。
将字符串转换为日期，使用 reviver 函数：

var text =  '{ "name":"Bill Gates", "birth":"1955-10-28", "city":"Seattle"}';
var obj = JSON.parse(text, function (key, value) {
    if  (key == "birth") {
        return new Date(value);
    } else {
         return value;
   }});
 
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;

在 JSON 中，不允许日期对象。JSON.stringify() 函数将把任何日期转换为字符串。

var obj =  { "name":"Bill Gates", "today":new Date(), "city":"Seattle"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;

• undefined
4.JSON对象
对象可以包含多个名称/值对：

'{ "firstName":"John" , "lastName":"Doe" } '

这一点也容易理解，与这条 JavaScript 语句等价：

firstName = "John"
lastName = "Doe"

5.JSON数组
数组可包含多个对象：

'{
"employees": [
{ "firstName":"John" , "lastName":"Doe" },
{ "firstName":"Anna" , "lastName":"Smith" },
{ "firstName":"Peter" , "lastName":"Jones" }
]
} '

6.JSON 使用 JavaScript 语法来对值或者对象进行操作
7. JSON 文件
JSON 文件的文件类型是 “.json”
JSON 文本的 MIME 类型是 “application/json”
8. eval() 函数使用的是 JavaScript 编译器，可解析 JSON 文本，然后生成 JavaScript 对象。必须把文本包围在括号中，这样才能避免语法错误：

var txt = '{ "employees" : [' +
'{ "firstName":"Bill" , "lastName":"Gates" },' +
'{ "firstName":"George" , "lastName":"Bush" },' +
'{ "firstName":"Thomas" , "lastName":"Carter" } ]}';
var obj = eval ("(" + txt + ")");

还是推荐

var obj = JSON.parse(txt);

（三）json对象
1.对象语法
·JSON 对象被花括号 {} 包围。
·JSON 对象以键/值对书写。
·键必须是字符串，值必须是有效的 JSON 数据类型（字符串、数字、对象、数组、布尔或 ·null）。没有日期、undifine、函数类型，需要的话通过一些方式转化。
·键和值由冒号分隔。
·每个键/值对由逗号分隔。
2. 访问对象值
您可以通过使用点号（.）来访问对象值：

myObj =  { "name":"Bill Gates", "age":62, "car":null };
x = myObj.name;

您也可以使用方括号（[]）来访问对象值：

myObj =  { "name":"Bill Gates", "age":62, "car":null };
x = myObj["name"];

3.遍历对象
您能够通过使用 for-in 遍历对象属性
在 for-in 循环中，请使用括号标记法来访问属性值：

myObj =  { "name":"Bill Gates", "age":62, "car":null };
for (x in myObj) {
   document.getElementById("demo").innerHTML  += myObj[x];
}

4.嵌套的 JSON 对象
一个 JSON 对象中的值可以是另一个 JSON 对象。

myObj =  {
   "name":"Bill Gates",
   "age":62,
   "cars": {
	  "car1":"Porsche",
	  "car2":"BMW",
	  "car3":"Volvo"
   }
}

您能够通过使用点号和括号访问嵌套的 JSON 对象：

x = myObj.cars.car2;
//或者：
x = myObj.cars["car2"];

5.修改值
您能够使用点号来修改 JSON 对象中的任何值：

myObj.cars.car3 = "Mercedes Benz";

您也可以使用括号来修改 JSON 对象中的值：

myObj.cars["car3"] = "Mercedes Benz";

6.删除对象属性
使用 delete 关键词来删除 JSON 对象的属性：

delete myObj.cars.car1;

（四）json数组
1.作为 JSON 对象的数组

 [  "Porsche", "BMW", "Volvo" ]

JSON 中的数组几乎与 JavaScript 中的数组相同。
在 JSON 中，数组值的类型必须属于字符串、数字、对象、数组、布尔或 null。
在 JavaScript 中，数组值可以是以上所有类型，外加任何其他有效的 JavaScript 表达式，包括函数、日期和 undefined。
2. JSON 对象中的数组
数组可以是对象属性的值：

{
"name":"Bill Gates",
"age":62,
"cars":[ "Porsche", "BMW", "Volvo" ]
}

3.访问数组值
您可以通过使用索引号来访问数组值：

x = myObj.cars[0];

4.遍历数组
您可以通过使用 for-in 循环来访问数组值：

for (i in myObj.cars) {
     x  += myObj.cars[i];
}

或者您可以使用 for 循环：

for (i  = 0; i < myObj.cars.length; i++) {
    x  += myObj.cars[i];
}

5.JSON 对象中的嵌套数组
数组中的值也可以另一个数组，或者甚至另一个 JSON 对象：

myObj =  {
   "name":"Bill Gates",
   "age":62,
   "cars": [
	  { "name":"Porsche",  "models":[ "911", "Taycan" ] },
	  { "name":"BMW", "models":[ "M5", "M3", "X5" ] },
	  { "name":"Volvo", "models":[ "XC60", "V60" ] }
   ]
}

如需访问数组内部的数组，请对每个数组使用 for-in 循环：

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

6.修改数组值
请使用索引号来修改数组：

myObj.cars[1] = "Mercedes Benz";

7.删除数组项目
请使用 delete 关键词来删除数组中的项目：

delete myObj.cars[1];

（五）json html+php
1.JSON 非常易于转译为 JavaScript。JavaScript 可用于在网页中生成 HTML。
2. HTML 表格
使用作为 JSON 接收到的数据来生成表格：

<!DOCTYPE html>
<html>
<body>

<h2>做一个基于下拉列表值的表格。</h2>

<select id="myselect" onchange="change_myselect(this.value)">
  <option value="">Choose an option:</option>
  <option value="customers">Customers</option>
  <option value="products">Products</option>
  <option value="suppliers">Suppliers</option>
</select>

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

<script>
function change_myselect(sel) {
  var obj, dbParam, xmlhttp, myObj, x, txt = "";
  obj = { table: sel, limit: 20 };
  dbParam = JSON.stringify(obj);
  xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      myObj = JSON.parse(this.responseText);
      txt += "<table border='1'>"
      for (x in myObj) {
        txt += "<tr><td>" + myObj[x].name + "</td></tr>";
      }
      txt += "</table>"    
      document.getElementById("demo").innerHTML = txt;
      }
    };
  xmlhttp.open("POST", "json_demo_db_post.php", true);
  xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xmlhttp.send("x=" + dbParam);
}
</script>

</body>
</html>

3.HTML 下拉列表
用接收到的 JSON 数据来生成 HTML 下拉列表：

<!DOCTYPE html>
<html>
<body>

<h2>做一个基于 JSON 数据的下拉列表。</h2>

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

<script>
var obj, dbParam, xmlhttp, myObj, x, txt = "";
obj = { table: "customers", limit: 20 };
dbParam = JSON.stringify(obj);
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    myObj = JSON.parse(this.responseText);
    txt += "<select>"
    for (x in myObj) {
      txt += "<option>" + myObj[x].name;
    }
    txt += "</select>"
    document.getElementById("demo").innerHTML = txt;
  }
};
xmlhttp.open("POST", "json_demo_db_post.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("x=" + dbParam);
</script>

</body>
</html>

（五）json JSONP
1.JSONP 是一种无需考虑跨域问题即可传送 JSON 数据的方法。
JSONP 不使用 XMLHttpRequest 对象。
JSONP 使用 <script> 标签取而代之。
JSONP 指的是 JSON with Padding。
从另一个域请求文件会引起问题，由于跨域政策。
从另一个域请求外部脚本没有这个问题。
JSONP 利用了这个优势，并使用 script 标签替代 XMLHttpRequest 对象。

<script src="demo_jsonp.php">

服务器上的文件在函数调用中封装结果：

<?php
$myJSON = '{ "name":"Bill Gates", "age":62, "city":"Seattle" }';
echo "myFunc(".$myJSON.");";
?>

结果返回对名为 “myFunc” 的函数的调用，其中的 JSON 数据为参数。
请确保客户端存在该函数。

函数 “myFunc” 位于客户端，用于处理 JSON 数据

<!DOCTYPE html>
<html>
<body>
<h1>使用 script 标签请求 JSON</h1>
<p>PHP 文件所返回的函数调用处理的是 JSON 数据。</p>
<p id="demo"></p>
<script>
function myFunc(myObj) {
  document.getElementById("demo").innerHTML = myObj.name;
}
</script>
<script src="/demo/demo_php_jsonp.php"></script>
</body>
</html>

2.创建动态脚本标签
上例会在页面加载时执行 “myFunc” 函数，根据您放置脚本标签的位置，这样不很令人满意。
Script 只应该在需要时创建：
在按钮被点击时创建和插入

<!DOCTYPE html>
<html>
<body>
<h1>点击按钮</h1>
<p>将创建一个带有 src 属性的 script 标签并将其放在文档中。</p>
<p>PHP 文件以 JSON 对象作为参数返回对函数的调用。</p>
<button onclick="clickButton()">单击我！</button>
<p id="demo"></p>
<script>
function clickButton() {
  var s = document.createElement("script");
  s.src = "/demo/demo_php_jsonp.php";
  document.body.appendChild(s);
}
function myFunc(myObj) {
  document.getElementById("demo").innerHTML = myObj.name;
}
</script>
</body>
</html>

3.动态 JSONP 结果
可通过向 PHP 文件发送 JSON 来创建动态的例子，然后根据这个 php 文件获得的信息让它返回一个 JSON 对象。
PHP 文件

<?php
header("Content-Type: application/json; charset=UTF-8");
$obj =  json_decode($_GET["x"], false);
$conn = new mysqli("myServer", "myUser", "myPassword", "Northwind");
$result = $conn->query("SELECT name FROM ".$obj->$table." LIMIT ".$obj->$limit);
$outp = array();
$outp = $result->fetch_all(MYSQLI_ASSOC);

echo "myFunc(".json_encode($outp).")";
?>

解释：
• 把请求转换为对象，使用 PHP 函数 json_decode()。
• 访问数据库MYSQLI_ASSOC，并用被请求的数据填充数组。
• 向对象添加数组。
• 使用 json_decode() 函数把该数组转换为 JSON。
• 用 “myFunc()” 封装返回对象。

<!DOCTYPE html>
<html>
<body>
<h1>点击按钮</h1>
<p>将创建一个带有 src 属性的 script 标签并将其放在文档中。</p>
<p>PHP 文件以 JSON 对象作为参数返回对函数的调用。</p>
<button onclick="clickButton()">单击我！</button>
<p id="demo"></p>
<p>请尝试将 table 属性从“customers”更改为“products”。</p>
<script>
function clickButton() {
  var obj, s
  obj = { table: "products", limit: 10 };
  s = document.createElement("script");
  s.src = "/demo/demo_php_jsonp_db.php?x=" + JSON.stringify(obj);
  document.body.appendChild(s);
}
function myFunc(myObj) {
  var x, txt = "";
  for (x in myObj) {
    txt += myObj[x].name + "<br>";
  }
  document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>