将 php json 数组推入 js 文件 - PHP (1)

📌 相关文章

📜 将 php json 数组推入 js 文件 - PHP (1)

📅 最后修改于: 2023-12-03 15:39:13.120000 🧑 作者: Mango

将 PHP JSON 数组推入 JS 文件 - PHP

在开发 Web 应用程序时，经常需要在 PHP 和 JavaScript 之间传递数据。JSON 是一种轻量级的数据交换格式，它已成为一种常见的数据传输格式。本教程将介绍如何将 PHP JSON 数组推入 JS 文件。

步骤 1：创建 PHP 文件

首先，创建名为 data.php 的 PHP 文件，用于生成 JSON 数据。

<?php  
header('Content-Type: application/json');

$data = array(
    array("name" => "John", "age" => 20),
    array("name" => "Mary", "age" => 25),
    array("name" => "Peter", "age" => 30)
);

echo json_encode($data);
?>

该文件生成一个包含三个人的数据数组，并使用 json_encode 函数将其转换为 JSON 格式。

步骤 2：调用 PHP 文件

接下来，我们需要调用 data.php 文件，将其返回的 JSON 数据传递给 JavaScript。

<!DOCTYPE html>
<html>
<head>
    <title>PHP to JSON to JavaScript</title>
</head>
<body>
    <h1>PHP to JSON to JavaScript</h1>

    <script type="text/javascript">
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                var data = JSON.parse(xhr.responseText);
                console.log(data);
            }
        };
        xhr.open('GET', 'data.php', true);
        xhr.send();
    </script>

</body>
</html>

我们使用 XMLHttpRequest 对象调用 data.php 文件，并在返回数据时使用 JSON.parse 函数将其转换为 JavaScript 对象。

步骤 3：在 JS 文件中使用 JSON 数据

现在我们已经可以从 PHP 文件中推入 JSON 数据到 JavaScript 代码中，在 JS 文件中使用该数据。

var data = [];

function processData(jsonData) {
    for (var i = 0; i < jsonData.length; i++) {
        var obj = jsonData[i];
        console.log(obj.name + " is " + obj.age + " years old.");
        data.push(obj);
    }
}

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var jsonData = JSON.parse(xhr.responseText);
        processData(jsonData);
    }
};
xhr.open('GET', 'data.php', true);
xhr.send();

在此 JS 代码中，我们定义了一个名为 data 的数组，然后编写了一个名为 processData 的函数，用于处理返回的 JSON 数据。最后，我们使用 XMLHttpRequest 对象从 data.php 文件中获取数据，并将其传递给 processData 函数。

结论

通过以上步骤，我们可以轻松地将 PHP 数据转换为 JSON 格式，然后在 JavaScript 文件中使用这些数据。这是一种方便的方法，可以为 Web 开发提供更强大的功能和更高效的数据交换。