PHP和MySQL如何將JSON資料轉換為HTML格式？

PHP和MySQL如何將JSON資料轉換為HTML格式？

在Web開發中，常常會遇到將後端透過PHP和MySQL取得到的資料以HTML格式呈現給前端頁面的需求。而常用的資料格式之一就是JSON。本文將介紹如何使用PHP和MySQL將JSON資料轉換為HTML格式，並提供對應的程式碼範例。

1. 資料庫準備

首先，需要準備好資料庫並儲存對應的資料。以MySQL為例，假設我們有一個名為"users"的表，儲存了使用者的姓名和年齡資訊。表的結構如下：

CREATE TABLE users (

id INT(11) AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(50) NOT NULL,
age INT(3) NOT NULL

);

向該表插入一些測試資料：

INSERT INTO users (name, age) VALUES ('張三', 20);
INSERT INTO users (name, age) VALUES ('李四', 25);
INSERT INTO users (name, age) VALUES ('王五' , 30);

2. PHP程式碼取得JSON數據

#使用PHP從資料庫中取得數據，並將它們轉換為JSON格式。

// 連線資料庫
$servername = "localhost";
$username = "root";
$password = "";
$ dbname = "test";
$conn = new mysqli($servername, $username, $password, $dbname);

// 檢查連線是否成功
if ($conn-> connect_error) {

die("连接失败: " . $conn->connect_error);

}

// 從資料庫取得資料
$sql = "SELECT * FROM users";
$result = $conn->query($ sql);

// 將資料轉換為JSON格式
$data = array();
if ($result->num_rows > 0) {

while($row = $result->fetch_assoc()) {
    $data[] = $row;
}

}

$jsonData = json_encode($data);
echo $jsonData;

// 關閉資料庫連線
$conn->close();
? >

上述程式碼首先連接到資料庫，並取得"users"表的資料。然後，透過一個循環將每行資料新增到一個陣列中。最後，透過json_encode()函數將該陣列轉換為JSON格式，並輸出JSON字串。

3. 前端程式碼解析JSON資料並產生HTML表格

在前端頁面中，我們可以使用JavaScript來解析從後端取得到的JSON數據，並將其轉換為HTML表格。

<meta charset="UTF-8">
<title>JSON to HTML</title>

<table id="usersTable">
    <thead>
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

<script>
    // 获取JSON数据
    fetch('get_data.php')
        .then(response => response.json())
        .then(data => {
            // 解析JSON数据并生成HTML表格
            const tableBody = document.querySelector('#usersTable tbody');
            data.forEach(row => {
                const tr = document.createElement('tr');
                tr.innerHTML = `
                    <td>${row.id}</td>
                    <td>${row.name}</td>
                    <td>${row.age}</td>
                `;
                tableBody.appendChild(tr);
            });
        });
</script>

rrreee

上述程式碼先建立一個空的HTML表格，並且設定表頭。然後，透過使用fetch()函數取得從PHP腳本傳回的JSON數據，並將其解析為JavaScript物件。接著，使用forEach()循環遍歷每行數據，並使用createElement()函數建立HTML表格的行。最後，將每行資料的值新增至對應的儲存格中，並將行新增至表格中。

透過上述步驟，我們成功地將MySQL資料庫中的資料透過PHP和JSON格式轉換為HTML表格的形式呈現給了前端頁面。

總結：

以上是PHP和MySQL如何將JSON資料轉換為HTML格式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！