JSON
发送数据
JSON.stringify()：将JavaScript对象转换为JSON格式数据
var myObj = { "name":"Bill Gates", "age":62, "city":"Seattle" };
var myJSON = JSON.stringify(myObj); //转换为JSON格式数据
window.location = "/demo/demo_json.php?x=" + myJSON; //将数据发送到php文件中
接收数据
JSON.parse()：将JSON数据转换为JavaScript对象
var myJSON = '{ "name":"Bill Gates", "age":62, "city":"Seattle" }';
var myObj = JSON.parse(myJSON);
document.getElementById("demo").innerHTML = myObj.name;
通过使用 AJAX 请求从服务器请求 JSON：
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myObj = JSON.parse(this.responseText); //将json解析成JavaScript对象
document.getElementById("demo").innerHTML = myObj.name;
}
};
xmlhttp.open("GET", "json_demo.txt", true);
xmlhttp.send();
在从数组派生的 JSON 上使用JSON.parse()时，该方法会返回 JavaScript 数组
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
const myArr = JSON.parse(this.responseText); //将JSON数据解析后存在数组变量中
document.getElementById("demo").innerHTML = myArr[0];
}
}
xmlhttp.open("GET", "json_array.txt", true);
xmlhttp.send();
存储数据
把数据存储在本地存储中
//存储数据：
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;
JSON 语法规则
JSON 数据- 名称和值
JSON 数据写为名称/值对。名称/值由字段名称构成，后跟冒号和值。
JSON 名称需要双引号。而 JavaScript 名称不需要。
JSON – 求值为 JavaScript 对象
JSON 格式几乎等同于 JavaScript 对象。
在 JSON 中，键必须是字符串，由双引号包围。
比较JSON和JavaScript的语法区别
{ "name":"Bill Gates" }
{ name:"Bill Gates" }
JSON 值
在 JSON 中，值必须是以下数据类型之一：
- 字符串（双引号）
- 数字（整数/浮点数）
- 对象（JSON 对象）
- 数组（中括号
[]书写） - 布尔
- null
JSON vs XML
比较JSON和XML的区别
{"employees":[
{ "firstName":"Bill", "lastName":"Gates" },
{ "firstName":"Steve", "lastName":"Jobs" },
{ "firstName":"Elon", "lastName":"Musk" }
]}
<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>
- XML 比 JSON 更难解析。
- JSON 被解析为可供使用的 JavaScript 对象。
对于 AJAX 应用程序，JSON 比 XML 更快更易用。
XML
- 读取 XML 文档
- 使用 XML DOM 遍历文档
- 提取变量中存储的值
JSON
- 读取 JSON 字符串
- JSON.Parse JSON 字符串
JSON 数组
数组值的类型必须属于字符串、数字、对象、数组、布尔或 null。
{
"name":"Bill Gates",
"age":62,
"cars":[ "Porsche", "BMW", "Volvo" ] //数组作为对象值
}
访问数组值
var myObj, x;
myObj = {
"name":"Bill Gates",
"age":62,
"cars":[ "Porsche", "BMW", "Volvo" ]
};
x = myObj.cars[0]; //cars对象的第0个值
document.getElementById("demo").innerHTML = x;
遍历数组
var myObj, i, x = "";
myObj = {
"name":"Bill Gates",
"age":62,
"cars":[ "Porsche", "BMW", "Volvo" ]
};
for (i in myObj.cars) { //cars的所有值
x += myObj.cars[i] + "<br>"; //遍历
}
document.getElementById("demo").innerHTML = x;
嵌套数组
myObj = {
"name":"Bill Gates",
"age":62,
"cars": [
{ "name":"Porsche", "models":[ "911", "Taycan" ] },
{ "name":"BMW", "models":[ "M5", "M3", "X5" ] },
{ "name":"Volvo", "models":[ "XC60", "V60" ] }
]
}
修改数组值
var myObj, i, x = "";
//JOSN
myObj = {
"name":"Bill Gates",
"age":62,
"cars": ["Porsche","BMW","Volvo"]
}
myObj.cars[2] = "Mercedes Benz"; //修改数组值
for (i in myObj.cars) {
x += myObj.cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = x;
删除数组项目
delete
var myObj, i, x = "";
myObj = {
"name":"Bill Gates",
"age":62,
"cars": ["Porsche","BMW","Volvo"]
}
delete myObj.cars[2]; //删除cars的第2个值
for (i in myObj.cars) {
x += myObj.cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = x;
JSON PHP
json_encode()：将PHP中的对象转换为JSON
<?php
$myObj->name = "Bill Gates";
$myObj->age = 62;
$myObj->city = "Seattle";
$myJSON = json_encode($myObj);
echo $myJSON; //返回myJSON
?>
转换结果
{"name":"Bill Gates","age":62,"city":"Seattle"}
数组的转换
<?php
$myArr = array("Bill Gates", "Steve Jobs", "Elon Musk");
$myJSON = json_encode($myArr);
echo $myJSON;
?>
转换结果
["Bill Gates","Steve Jobs","Elon Musk"]
PHP 数据库
obj = { "table":"customers", "limit":10 };
dbParam = JSON.stringify(obj); //将obj转换为JSON字符串
xmlhttp = new XMLHttpRequest(); //向php文件发送请求（JSON 作为参数）
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
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);
//把数组添加到对象，使用 json_encode() 函数以 JSON 返回该对象。
echo json_encode($outp);
?>
php文件解释
json_decode()：将请求转换为对象
json_encode()：以JSON返回对象
服务器上的 PHP 文件获取 JSON 数据
var xmlhttp, myObj, x, txt = "";
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myObj = JSON.parse(this.responseText);
for (x in myObj) {
txt += myObj[x].CustomerId + "<br>";
}
document.getElementById("demo").innerHTML = txt;
}
};
xmlhttp.open("GET", "/demo/demo_json_db.php", true);
xmlhttp.send();
PHP 方法 = POST
在向服务器发送数据时，通常最好是使用 HTTP POST 方法。
使用 HTTP 方法 POST 把数据发送到 PHP 文件
如需使用 POST 方法来发送 AJAX 请求，请指定该方法和正确的头部。
发送到服务器的数据现在必须是 .send() 方法的参数。
var xmlhttp, myObj, x, txt = "";
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myObj = JSON.parse(this.responseText);
for (x in myObj) {
txt += myObj[x].CustomerId + "<br>";
}
document.getElementById("demo").innerHTML = txt;
}
};
xmlhttp.open("POST", "/demo/demo_json_db.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //指定头部
xmlhttp.send();
PHP 文件
使用 $_POST 而不是 $_GET
header("Content-Type: application/json; charset=UTF-8");
$obj = json_decode($_POST["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);
HTML
HTML 表格
obj = { "table":"customers", "limit":20 };
dbParam = JSON.stringify(obj); //转换为JSON格式
xmlhttp = new XMLHttpRequest(); //请求
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) { //等待响应
myObj = JSON.parse(this.responseText); //解析JSON数据
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); //将“"x=" + dbParam”发送到php文件中
动态 HTML 表格
<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>
function change_myselect(sel) {
var obj, dbParam, xmlhttp, myObj, x, txt = "";
obj = { "table":sel, "limit":20 }; //js对象
dbParam = JSON.stringify(obj); //转换为JSON
xmlhttp = new XMLHttpRequest(); //请求
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) { //等待响应
myObj = JSON.parse(this.responseText); //解析JSON
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);
}
HTML 下拉列表
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);
JSONP
JSONP 是一种无需考虑 跨域 问题即可传送 JSON 数据的方法。
使用 script 标签替代 XMLHttpRequest 对象
Server 文件
$myJSON = '{ "name":"Bill Gates", "age":62, "city":"Seattle" }';
echo "myFunc(".$myJSON.");";
结果返回对名为 “myFunc” 的函数的调用
使用 script 标签请求 JSON
<p id="demo"></p>
<script>
function myFunc(myObj) {
document.getElementById("demo").innerHTML = myObj.name;
}
</script>
<script src="/demo/demo_php_jsonp.php"></script> <!-- script 标签请求 JSON -->
创建动态脚本标签（执行某事件才会创建 script 标签）
<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"; //创建script 标签
document.body.appendChild(s); //放在body的最末尾
}
function myFunc(myObj) {
document.getElementById("demo").innerHTML = myObj.name;
}
</script>
动态 JSONP 结果
通过 向 PHP 文件发送 JSON 来创建动态的例子，然后根据这个 php 文件获得的信息让它返回一个 JSON 对象。
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);
//使用 json_decode() 函数把该数组转换为 JSON。
//用 "myFunc()" 封装返回对象。
echo "myFunc(".json_encode($outp).")";
function clickButton() {
var obj, s
obj = { table: "customers", limit: 10 };
s = document.createElement("script");
s.src = "/demo/demo_php_jsonp_db.php?x=" + JSON.stringify(obj);
document.body.appendChild(s);
}
//myFunc()在php文件中
function myFunc(myObj) {
var x, txt = "";
for (x in myObj) {
txt += myObj[x].name + "<br>";
}
document.getElementById("demo").innerHTML = txt;
}
回调函数
当无法控制服务器文件时使用
<button onclick="clickButton()">单击我！</button>
<p id="demo"></p>
function clickButton() {
var s = document.createElement("script");
s.src = "demo_jsonp2.php?callback=myDisplayFunction";
document.body.appendChild(s); //创建script标签
}
function myDisplayFunction(myObj) {
document.getElementById("demo").innerHTML = myObj.name;
}
3515
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
