加入收藏 | 设为首页
我要投稿

小码哥的IT人生

首页 > JS > JavaScript基础

JSON 数据与 PHP 服务器交互

JavaScript基础 2022-04-25 01:54:36小码哥的IT人生shichen

JSON PHP

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

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

PHP 文件

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

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

PHP 文件

<?php
$myObj->name = "Bill Gates";
$myObj->age = 62;
$myObj->city = "Seattle";
$myJSON = json_encode($myObj);
echo $myJSON;
?>

demo_file.php 文件 完整代码：

<!doctype html>
<html>
<body>
<?php
$myObj->name = "Bill Gates";
$myObj->age = 62;
$myObj->city = "Seattle";
$myJSON = json_encode($myObj);
echo $myJSON;
?>
</body>
</html>

客户端 JavaScript

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

示例代码：

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

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", "/demo/demo_file.php", true);
xmlhttp.send();

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>从服务器上的 PHP 获取 JSON 数据</h1>
<p id="demo"></p>
<script>
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", "/demo/demo_file.php", true);
xmlhttp.send();
</script>
</body>
</html>

运行结果：

从服务器上的 PHP 获取 JSON 数据

Bill Gates

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

PHP 数组

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

PHP 文件

<?php
$myArr = array("Bill Gates", "Steve Jobs", "Elon Musk");
$myJSON = json_encode($myArr);
echo $myJSON;
?>

demo_file_array.php 文件 完整代码：

<?php
$myArr = array("Bill Gates", "Steve Jobs", "Elon Musk");
$myJSON = json_encode($myArr);
echo $myJSON;
?>

运行结果：

["Bill Gates","Steve Jobs","Elon Musk"]

客户端 JavaScript

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

示例代码：

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

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function()  {
    if (this.readyState == 4 && this.status == 200) {
         myObj = JSON.parse(this.responseText);
         document.getElementById("demo").innerHTML = myObj[2];
     }
};
xmlhttp.open("GET", "demo_file_array.php", true);
xmlhttp.send();

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>从 PHP 文件获取 JSON 数据，并把它转换为 JavaScript 数组</h1>
<p id="demo"></p>
<script>
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var myObj = JSON.parse(this.responseText);
    document.getElementById("demo").innerHTML = myObj[2];
  }
};
xmlhttp.open("GET", "/demo/demo_file_array.php", true);
xmlhttp.send();
</script>
</body>
</html>

运行结果：

从 PHP 文件获取 JSON 数据，并把它转换为 JavaScript 数组

Elon Musk

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

PHP 数据库

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

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

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

示例代码：

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

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();

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>通过服务器上的 PHP 获取 JSON 数据</h1>
<p>从 PHP 文件接收的 JSON：</p>
<p id="demo"></p>
<script>
var xmlhttp;
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("demo").innerHTML = this.responseText;
  }
};
xmlhttp.open("GET", "/demo/demo_json_db.php", true);
xmlhttp.send();
</script>
</body>
</html>

运行结果：

通过服务器上的 PHP 获取 JSON 数据

从 PHP 文件接收的 JSON：

[{"CustomerId":"Alibaba"},{"CustomerId":"APPLE"},{"CustomerId":"BAIDU"},{"CustomerId":"Canon"},{"CustomerId":"Google"},{"CustomerId":"HUAWEI"},{"CustomerId":"Microsoft"},{"CustomerId":"Nokia"},{"CustomerId":"SONY"},{"CustomerId":"Tencent"}]

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

例子解释：

  1. 定义包含 table 属性和 limit 属性的对象。
  2. 将这个对象转换为 JSON 字符串。
  3. 向这个 PHP 文件发送请求，其中 JSON 作为参数。
  4. 等待直到请求返回结果（作为 JSON）。
  5. 显示从 PHP 文件接收到的结果。

查看 PHP 文件

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 json_encode($outp);
?>

PHP 文件解释：

  1. 将请求转换为对象，使用 PHP 函数 json_decode()。
  2. 访问数据库，用所请求的数据填充数组。
  3. 把数组添加到对象，使用 json_encode() 函数以 JSON 返回该对象。

遍历结果

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

实例

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

...
xmlhttp.onreadystatechange = function() {
     if (this.readyState == 4 && this.status == 200) {
         myObj = JSON.parse(this.responseText);
         for (x in myObj) {
             txt += myObj[x].name + "<br>";
        }
         document.getElementById("demo").innerHTML = txt;
    }
};
 ...

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>通过服务器上的 PHP 文件获取 JSON 数据</h1>
<p id="demo"></p>
<script>
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();
</script>
</body>
</html>

运行结果：

通过服务器上的 PHP 文件获取 JSON 数据

Alibaba
APPLE
BAIDU
Canon
Google
HUAWEI
Microsoft
Nokia
SONY
Tencent

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

PHP 方法 = POST

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

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

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

示例代码：

obj = { "table":"customers", "limit":10 };
dbParam = JSON.stringify(obj);
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].name + "<br>";
        }
         document.getElementById("demo").innerHTML = txt;
    }
};
xmlhttp.open("POST", "demo_json_db.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("x=" + dbParam);

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>使用 HTTP 方法 POST 把数据发送到 PHP 文件</h1>
<p id="demo"></p>
<script>
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();
</script>
</body>
</html>

运行结果：

使用 HTTP 方法 POST 把数据发送到 PHP 文件

Alibaba
APPLE
BAIDU
Canon
Google
HUAWEI
Microsoft
Nokia
SONY
Tencent

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

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

PHP 文件

使用 $_POST 而不是 $_GET：

<?php
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);
?>

相关阅读

版权所有 © 小码哥的IT人生
Copyright © phpcodeweb All Rights Reserved
 ICP备案号：苏ICP备17019232号-2  

苏公网安备 32030202000762号

© 2021-2024