PHP和MySQL如何將JSON資料轉換為HTML格式？-php教程-PHP中文網

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

WBOY

發布： 2023-07-12 08:30:01

原創

1133 人瀏覽過

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

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

資料庫準備

首先，需要準備好資料庫並儲存對應的資料。以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);

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字串。

前端程式碼解析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格式的方法，並提供了對應的程式碼範例。透過這種方式，我們可以輕鬆地從後端獲取數據，並在前端頁面上以易於閱讀的表格形式進行展示。希望本文對你在Web開發中處理JSON資料和產生HTML表格有幫助。 ###

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