How to convert JSON data to HTML format with PHP and MySQL?

How do PHP and MySQL convert JSON data to HTML format?

In web development, we often encounter the need to present the data obtained by the backend through PHP and MySQL to the front-end page in HTML format. One of the commonly used data formats is JSON. This article will introduce how to use PHP and MySQL to convert JSON data into HTML format, and provide corresponding code examples.

1. Database preparation

First, you need to prepare the database and store the corresponding data. Taking MySQL as an example, assume we have a table named "users" that stores the user's name and age information. The structure of the table is as follows:

CREATE TABLE users (

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

);

Insert some test data into the table:

INSERT INTO users (name, age) VALUES ('Zhang San', 20);
INSERT INTO users (name, age) VALUES ('Li Si', 25);
INSERT INTO users (name, age) VALUES ('王五' , 30);

2. PHP code to get JSON data

Use PHP to get data from the database and convert them to JSON format.

//Connect to the database
$servername = "localhost";
$username = "root";
$password = "";
$ dbname = "test";
$conn = new mysqli($servername, $username, $password, $dbname);

// Check whether the connection is successful
if ($conn-> connect_error) {

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

}

// Get data from the database
$sql = "SELECT * FROM users";
$result = $conn->query($ sql);

// Convert data to JSON format
$data = array();
if ($result->num_rows > 0) {

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

}

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

// Close the database connection
$conn->close();
? >

The above code first connects to the database and obtains the data of the "users" table. Then, add each row of data to an array through a loop. Finally, the array is converted to JSON format through the json_encode() function and a JSON string is output.

3. The front-end code parses JSON data and generates HTML tables

In the front-end page, we can use JavaScript to parse the JSON data obtained from the back-end and convert it Convert to HTML table.

<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>

The above code first creates an empty HTML table and sets the header. Then, get the JSON data returned from the PHP script and parse it into a JavaScript object by using the fetch() function. Next, use forEach() to loop through each row of data, and use the createElement() function to create the rows of the HTML table. Finally, add the value of each row of data to the corresponding cell and add the row to the table.

Through the above steps, we successfully converted the data in the MySQL database into HTML tables through PHP and JSON formats and presented them to the front-end page.

Summary:

This article introduces how to use PHP and MySQL to convert JSON data into HTML format, and provides corresponding code examples. This way we can easily get the data from the backend and display it in an easy-to-read table on the frontend page. I hope this article will be helpful to you in processing JSON data and generating HTML tables in web development.

The above is the detailed content of How to convert JSON data to HTML format with PHP and MySQL?. For more information, please follow other related articles on the PHP Chinese website!