PHP和MySQL如何將JSON資料轉換為HTML格式？
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>