前端JSON

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 中,键必须是字符串,由双引号包围。

比较JSONJavaScript的语法区别

{ "name":"Bill Gates" }
{ name:"Bill Gates" }

JSON 值

在 JSON 中,值必须是以下数据类型之一:

  • 字符串(双引号)
  • 数字(整数/浮点数)
  • 对象(JSON 对象)
  • 数组(中括号[]书写)
  • 布尔
  • null

JSON vs XML

比较JSONXML的区别

{"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;
}
  • 0
    点赞
  • 0
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:游动-白 设计师:我叫白小胖 返回首页
评论

打赏作者

m0_63636870

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值