Maison >développement back-end >tutoriel php >Comment convertir des données JSON au format HTML avec PHP et MySQL ?
Comment convertir des données JSON au format HTML avec PHP et MySQL ?
Dans le développement Web, nous rencontrons souvent le besoin de présenter les données obtenues par le backend via PHP et MySQL sur la page front-end au format HTML. L'un des formats de données couramment utilisés est JSON. Cet article explique comment utiliser PHP et MySQL pour convertir des données JSON au format HTML et fournit des exemples de code correspondants.
Tout d'abord, la base de données doit être préparée et les données correspondantes stockées. En prenant MySQL comme exemple, supposons que nous ayons une table nommée « utilisateurs » qui stocke le nom et l'âge de l'utilisateur. La structure du tableau est la suivante :
CRÉER UNE TABLE aux utilisateurs (
id INT(11) AUTO_INCREMENT PRIMARY KEY, name VARCHAR(50) NOT NULL, age INT(3) NOT NULL
);
Insérer quelques données de test dans le tableau :
INSÉRER DANS les utilisateurs (nom, âge) VALEURS ('Zhang San', 20) ;
INSERT INTO utilisateurs (nom, âge) VALUES ('李思', 25);
INSERT INTO utilisateurs (nom, âge) VALUES ('王五', 30);
Utilisez PHP pour obtenir les données JSON de la base de données. Obtenez les données et convertissez-les au format JSON.
bf4d1d582c48fe831025f16901f1afcdconnect_error) {
die("连接失败: " . $conn->connect_error);
}
// Récupérez les données de la base de données
$ sql = "SELECT * FROM users";
$result = $conn->query($sql);
// Convertir les données au format JSON
$data = array();
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) { $data[] = $row; }
}
$jsonData = json_encode($data);
echo $jsonData;
// Fermez la connexion à la base de données
$conn->close();
?>
Le Le code ci-dessus se connecte d'abord à la base de données et obtient les données de la table "utilisateurs". Ensuite, ajoutez chaque ligne de données à un tableau via une boucle. Enfin, le tableau est converti au format JSON via la fonction json_encode() et une chaîne JSON est générée.
Dans la page front-end, nous pouvons utiliser JavaScript pour analyser les données JSON obtenues depuis le back-end et les convertir en tableau HTML.
8b05045a5be5764f313ed5b9168a17e6
6ded17fe4bfcbd98efb99db7c7c8ec7b
93f0f5c25f18dab9d176bd4f6de5d30e
<meta charset="UTF-8"> <title>JSON to HTML</title>
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
<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>
36cc49f0c466276486e50c850b7e4956