从 JavaScript 中获取和解析 PHP JSON 数据198

在现代 Web 开发中，在 JavaScript 和 PHP 之间交换数据非常常见。将 PHP 生成的 JSON 数据发送到 JavaScript 并对其进行解析可以让您在客户端以动态且交互的方式操作数据。

使用 AJAX 获取 JSON 数据

使用 JavaScript 获取 PHP JSON 数据的第一种方法是通过异步 JavaScript 和 XML（AJAX）。AJAX 允许您在不刷新整个页面的情况下从服务器异步获取数据。以下是如何使用 AJAX 从 PHP 脚本中获取 JSON 数据：
// 创建 XMLHttpRequest 对象
const xhr = new XMLHttpRequest();
// 设置请求参数
('GET', '');
('Content-Type', 'application/json');
// 设置回调函数来处理响应
= function() {
if ( === 200) {
// 解析 JSON 响应
const data = ();
// 使用响应数据
(data);
} else {
// 处理错误
();
}
};
// 发送请求
();

在 PHP 脚本中，您可以使用 json_encode() 函数将数组或对象转换成 JSON 格式：

使用 Fetch API 获取 JSON 数据

Fetch API 是处理 HTTP 请求的另一个更现代的方法。Fetch API 在所有现代浏览器中都受到支持，它提供了更简洁的方法来获取和解析 JSON 数据：
// 使用 Fetch API 获取 JSON 数据
fetch('')
.then(response => ())
.then(data => {
// 使用响应数据
(data);
})
.catch(error => {
// 处理错误
(error);
});

解析 JSON 数据

一旦您从服务器获取了 JSON 响应，您需要将其解析为 JavaScript 对象或数组。您可以使用 () 函数进行解析：
const data = ();

处理 JSON 数据

解析 JSON 数据后，您可以使用 JavaScript 中的标准操作访问和操作响应数据。例如，您可以访问对象属性或遍历数组中的项目：
// 访问 JSON 对象属性
(); // 输出：John
// 遍历 JSON 数组
(item => {
();
});

使用 JSONP 获取 JSON 数据

如果由于跨域限制而无法直接从 PHP 脚本中获取 JSON 数据，可以使用 JSONP（JSON with Padding）。JSONP 允许您通过动态创建 <script> 元素来跨域发送 JSON 数据，如下所示：
// 创建 JSONP 回调函数
const callbackName = 'jsonCallback';
window[callbackName] = function(data) {
// 使用响应数据
(data);
};
// 创建 JSONP 请求
const script = ('script');
= `?callback=${callbackName}`;
// 将脚本添加到页面中
(script);

在 PHP 脚本中，您需要针对 JSONP 回调函数返回 JSON 数据，如下所示：

使用 JavaScript 从 PHP 脚本中获取和解析 JSON 数据是一种强大而通用的技术。通过使用 AJAX、Fetch API 或 JSONP，您可以动态地接收和处理服务器端数据，从而为您的 Web 应用程序增添交互性和灵活性。

2024-11-20

上一篇：如何在 Linux 中使用 PHP 处理文件路径

下一篇：从 PHP 获取网站路径的 4 种强大方法