参考手册
JSON 教程
JSON 数组
JSON ASP.NET

JSON PHP

JSON 的常规用途是从 web 服务器读取数据，然后在网页中显示这些数据。

本章向您讲解如何在客户端与 PHP 服务器之间交换 JSON 数据。

PHP 文件

PHP 提供处理 JSON 的内置函数。

通过使用 PHP 函数 json_encode()，PHP 中的对象可转换为 JSON：

PHP 文件
  1. <!doctype html>
  2. <html>
  4. <body>
  5. <?php $myobj-=""?>name = "埃隆 马斯克";
  6. $myObj->age = 50;
  7. $myObj->city = "洛杉矶";
  9. $myJSON = json_encode($myObj);
  11. echo $myJSON;
  12. ?>
  13. </body>
  14. </html>
运行一下

客户端 JavaScript

这是客户端上的 JavaScript，使用 AJAX 调用来请求上例的 PHP 文件：

使用 JSON.parse() 把结果转换为 JavaScript 对象：

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <h1>从服务器上的 PHP 获取 JSON 数据</h1>
  7. <p id="demo">
  9. <script>
  10. var xmlhttp = new XMLHttpRequest();
  12. xmlhttp.onreadystatechange = function() {
  13.   if (this.readyState == 4 && this.status == 200) {
  14.     myObj = JSON.parse(this.responseText);
  15.     document.getElementById("demo").innerHTML = myObj.name;
  16.   }
  17. };
  18. xmlhttp.open("GET", "/demo/demo_php_json_encode.php", true);
  19. xmlhttp.send();
  20. </script>
  22. </body>
  23. </html>
运行一下

PHP 数组

在使用 PHP 函数 json_encode() 时，PHP 中的数组也将被转换为 JSON：

PHP 文件
  1. <?php $myarr="array("Bill" gates",="" "steve="" jobs",="" "elon="" musk");="" $myjson="json_encode($myArr);" echo="" $myjson;=""?>

客户端 JavaScript

这是客户端上的 JavaScript，使用 AJAX 调用来请求上例的 PHP 文件：

请使用 JSON.parse() 将结果转换为 JavaScript 数组：

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <h1>从 PHP 文件获取 JSON 数据，并把它转换为 JavaScript 数组</h1>
  7. <p id="demo">
  9. <script>
  10. var xmlhttp = new XMLHttpRequest();
  11. xmlhttp.onreadystatechange = function() {
  12.   if (this.readyState == 4 && this.status == 200) {
  13.     var myObj = JSON.parse(this.responseText);
  14.     document.getElementById("demo").innerHTML = myObj[2];
  15.   }
  16. };
  17. xmlhttp.open("GET", "/demo/demo_php_json_encode_array.php", true);
  18. xmlhttp.send();
  19. </script>
  21. </body>
  22. </html>
运行一下

PHP 数据库

PHP 是服务器端编程语言，应该用于只能由服务器执行的操作，比如访问数据库。

想象一下服务器上有一个数据库，包含客户、产品和供应商数据。

此刻，您需要请求服务器来获取“客户”表中前十条记录：

请使用 JSON.stringify() 将 JavaScript 对象转换为 JSON：

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <h1>通过服务器上的 PHP 获取 JSON 数据</h1>
  7. <p>从 PHP 文件接收的 JSON：</p>
  9. <p id="demo">
  11. <script>
  12. var xmlhttp;
  13. xmlhttp = new XMLHttpRequest();
  14. xmlhttp.onreadystatechange = function() {
  15.   if (this.readyState == 4 && this.status == 200) {
  16.     document.getElementById("demo").innerHTML = this.responseText;
  17.   }
  18. };
  19. xmlhttp.open("GET", "/demo/demo_json_db.php", true);
  20. xmlhttp.send();
  21. </script>
  23. </body>
  24. </html>
运行一下
例子解释：

定义包含 table 属性和 limit 属性的对象。

将这个对象转换为 JSON 字符串。

向这个 PHP 文件发送请求，其中 JSON 作为参数。

等待直到请求返回结果（作为 JSON）。

显示从 PHP 文件接收到的结果。

PHP 文件
  1. <?php
  2. header("Content-Type: application/json; charset=UTF-8");
  3. $obj =  json_decode($_GET["x"], false);
  5. $conn = new mysqli("myServer", "myUser", "myPassword", "Northwind");
  6. $result = $conn->query("SELECT name FROM ".$obj->$table." LIMIT ".$obj->$limit);
  7. $outp = array();
  8. $outp = $result->fetch_all(MYSQLI_ASSOC);
  10. echo json_encode($outp);
  11. ?>
运行一下

PHP 文件解释：将请求转换为对象，使用 PHP 函数 json_decode()。

访问数据库，用所请求的数据填充数组。

把数组添加到对象，使用 json_encode() 函数以 JSON 返回该对象。

遍历结果

把从 PHP 文件接收到的结果转换为 JavaScript 对象，或者是在本例中的，一个 JavaScript数组：

使用 JSON.parse() 把 JSON 转换为 JavaScript 对象：

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <h1>通过服务器上的 PHP 文件获取 JSON 数据</h1>
  7. <p id="demo">
  9. <script>
  10. var xmlhttp, myObj, x, txt = "";
  11. xmlhttp = new XMLHttpRequest();
  12. xmlhttp.onreadystatechange = function() {
  13.   if (this.readyState == 4 && this.status == 200) {
  14.     myObj = JSON.parse(this.responseText);
  15.     for (x in myObj) {
  16.       txt += myObj[x].CustomerId + "<br>";
  17.     }
  18.     document.getElementById("demo").innerHTML = txt;
  19.   }
  20. };
  21. xmlhttp.open("GET", "/demo/demo_json_db.php", true);
  22. xmlhttp.send();
  23. </script>
  24. </body>
  25. </html>
运行一下

PHP 方法 = POST

在向服务器发送数据时，通常最好是使用 HTTP POST 方法。

如需使用 POST 方法来发送 AJAX 请求，请指定该方法和正确的头部。

发送到服务器的数据现在必须是 .send() 方法的参数：

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <h1>使用 HTTP 方法 POST 把数据发送到 PHP 文件</h1>
  7. <p id="demo">
  10. <script>
  11. var xmlhttp, myObj, x, txt = "";
  12. xmlhttp = new XMLHttpRequest();
  13. xmlhttp.onreadystatechange = function() {
  14.   if (this.readyState == 4 && this.status == 200) {
  15.     myObj = JSON.parse(this.responseText);
  16.     for (x in myObj) {
  17.       txt += myObj[x].CustomerId + "<br>";
  18.     }
  19.     document.getElementById("demo").innerHTML = txt;
  20.   }
  21. };
  22. xmlhttp.open("POST", "/demo/demo_json_db.php", true);
  23. xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  24. xmlhttp.send();
  25. </script>
  27. </body>
  28. </html>
运行一下

PHP 文件中的唯一不同是获取被传输数据的方法。

PHP 文件

使用 $_POST 而不是 $_GET：

  1. <?php
  2. header("Content-Type: application/json; charset=UTF-8");
  3. $obj =  json_decode($_POST["x"], false);
  5. $conn = new mysqli("myServer", "myUser", "myPassword", "Northwind");
  6. $result = $conn->query("SELECT name FROM ".$obj->$table." LIMIT ".$obj->$limit);
  7. $outp = array();
  8. $outp = $result->fetch_all(MYSQLI_ASSOC);
  10. echo json_encode($outp);
  11. ?>
运行一下
JSON 数组
JSON ASP.NET

分类导航

HTMLHTML5JAVASCRIPTCSSjQueryBootstrap 3 教程SassReactHTMl 颜色教程JSONXMLXPathTypeScriptAppML 教程XLinkXPointerXQueryXFormsXsltXML SchemaXSL-FOWeb ServiceWSDSOAPW3CSVGDHTMLTCP/IPjQuery Mobile 教程XHTML