用JavaScript把PHP返回的JSON数组输出到ul元素的方法

技术文摘

2025-01-09 02:22:46 小编

在Web开发中，经常会遇到需要从服务器端（如使用PHP编写的后端）获取数据，并在前端页面上进行展示的情况。本文将介绍如何使用JavaScript将PHP返回的JSON数组输出到HTML页面的ul元素中。

在PHP端，需要将数据以JSON格式返回给前端。假设我们有一个简单的PHP脚本，用于从数据库中获取一些数据，并将其编码为JSON格式：

<?php
// 假设从数据库中获取数据
$data = array(
    array("name" => "Apple", "price" => 1.5),
    array("name" => "Banana", "price" => 0.8),
    array("name" => "Orange", "price" => 1.2)
);

// 将数据编码为JSON格式并返回
echo json_encode($data);
?>

接下来，在前端的HTML页面中，需要创建一个ul元素用于展示数据，并使用JavaScript来获取PHP返回的JSON数据并进行处理：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSON数据展示</title>
</head>

<body>
    <ul id="data-list"></ul>

    <script>
        // 使用fetch API获取PHP返回的JSON数据
        fetch('data.php')
          .then(response => response.json())
          .then(data => {
                const ul = document.getElementById('data-list');
                data.forEach(item => {
                    const li = document.createElement('li');
                    li.textContent = `${item.name}: $${item.price}`;
                    ul.appendChild(li);
                });
            });
    </script>
</body>

</html>

在上述代码中，首先使用fetch API获取PHP脚本返回的JSON数据，然后将其解析为JavaScript对象。接着，遍历数据数组，为每个数据项创建一个li元素，并将其添加到ul元素中。

通过这种方法，我们可以轻松地将PHP返回的JSON数组输出到HTML页面的ul元素中，实现数据的动态展示。在实际应用中，可以根据具体需求对代码进行调整和扩展，例如添加错误处理、样式美化等，以提供更好的用户体验。

TAGS: JavaScript PHP ul元素 JSON数组

万千站长工具

技术文摘

用JavaScript把PHP返回的JSON数组输出到ul元素的方法

欢迎使用万千站长工具！