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 ?

Jul 12, 2023 am 08:28 AM
json数据转换为html格式

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.

  1. Préparation de la base de données

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
Copier après la connexion

);

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

  1. Code PHP pour obtenir des données JSON

Utilisez PHP pour obtenir les données JSON de la base de données. Obtenez les données et convertissez-les au format JSON.

//Connectez-vous à la base de données
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "test";
$conn = new mysqli ($ servername, $username, $password, $dbname);

// Vérifiez si la connexion est réussie
if ($conn->connect_error) {

die("连接失败: " . $conn->connect_error);
Copier après la connexion

}

// 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;
}
Copier après la connexion

}

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

  1. Le code front-end analyse les données JSON et génère des tableaux HTML

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.



<meta charset="UTF-8">
<title>JSON to HTML</title>
Copier après la connexion


<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>
Copier après la connexion


Le code ci-dessus crée d'abord un tableau HTML vide et définit l'en-tête. Ensuite, récupérez les données JSON renvoyées par le script PHP et analysez-les dans un objet JavaScript à l'aide de la fonction fetch(). Ensuite, utilisez forEach() pour parcourir chaque ligne de données et utilisez la fonction createElement() pour créer les lignes du tableau HTML. Enfin, ajoutez la valeur de chaque ligne de données à la cellule correspondante et ajoutez la ligne au tableau.

Grâce aux étapes ci-dessus, nous avons réussi à convertir les données de la base de données MySQL en tableaux HTML via les formats PHP et JSON et à les présenter sur la page frontale.

Résumé :

Cet article présente la méthode de conversion des données JSON au format HTML à l'aide de PHP et MySQL, et fournit des exemples de code correspondants. De cette façon, nous pouvons facilement obtenir les données du backend et les afficher dans un tableau facile à lire sur la page frontend. J'espère que cet article vous sera utile pour traiter les données JSON et générer des tableaux HTML dans le développement Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
Will R.E.P.O. Vous avez un jeu croisé?
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Expliquez les jetons Web JSON (JWT) et leur cas d'utilisation dans les API PHP. Expliquez les jetons Web JSON (JWT) et leur cas d'utilisation dans les API PHP. Apr 05, 2025 am 12:04 AM

JWT est une norme ouverte basée sur JSON, utilisée pour transmettre en toute sécurité des informations entre les parties, principalement pour l'authentification de l'identité et l'échange d'informations. 1. JWT se compose de trois parties: en-tête, charge utile et signature. 2. Le principe de travail de JWT comprend trois étapes: la génération de JWT, la vérification de la charge utile JWT et l'analyse. 3. Lorsque vous utilisez JWT pour l'authentification en PHP, JWT peut être généré et vérifié, et les informations sur le rôle et l'autorisation des utilisateurs peuvent être incluses dans l'utilisation avancée. 4. Les erreurs courantes incluent une défaillance de vérification de signature, l'expiration des jetons et la charge utile surdimensionnée. Les compétences de débogage incluent l'utilisation des outils de débogage et de l'exploitation forestière. 5. L'optimisation des performances et les meilleures pratiques incluent l'utilisation des algorithmes de signature appropriés, la définition des périodes de validité raisonnablement,

Décrivez les principes solides et comment ils s'appliquent au développement de PHP. Décrivez les principes solides et comment ils s'appliquent au développement de PHP. Apr 03, 2025 am 12:04 AM

L'application du principe solide dans le développement de PHP comprend: 1. Principe de responsabilité unique (SRP): Chaque classe n'est responsable d'une seule fonction. 2. Principe ouvert et ferme (OCP): les changements sont réalisés par extension plutôt que par modification. 3. Principe de substitution de Lisch (LSP): les sous-classes peuvent remplacer les classes de base sans affecter la précision du programme. 4. Principe d'isolement d'interface (ISP): utilisez des interfaces à grain fin pour éviter les dépendances et les méthodes inutilisées. 5. Principe d'inversion de dépendance (DIP): les modules élevés et de bas niveau reposent sur l'abstraction et sont mis en œuvre par injection de dépendance.

Comment définir automatiquement les autorisations d'UnixSocket après le redémarrage du système? Comment définir automatiquement les autorisations d'UnixSocket après le redémarrage du système? Mar 31, 2025 pm 11:54 PM

Comment définir automatiquement les autorisations d'UnixSocket après le redémarrage du système. Chaque fois que le système redémarre, nous devons exécuter la commande suivante pour modifier les autorisations d'UnixSocket: sudo ...

Expliquez le concept de liaison statique tardive en PHP. Expliquez le concept de liaison statique tardive en PHP. Mar 21, 2025 pm 01:33 PM

L'article traite de la liaison statique tardive (LSB) dans PHP, introduite dans PHP 5.3, permettant une résolution d'exécution de la méthode statique nécessite un héritage plus flexible. Problème main: LSB vs polymorphisme traditionnel; Applications pratiques de LSB et perfo potentiel

Comment envoyer une demande post contenant des données JSON à l'aide de la bibliothèque Curl de PHP? Comment envoyer une demande post contenant des données JSON à l'aide de la bibliothèque Curl de PHP? Apr 01, 2025 pm 03:12 PM

Envoyant des données JSON à l'aide de la bibliothèque Curl de PHP dans le développement de PHP, il est souvent nécessaire d'interagir avec les API externes. L'une des façons courantes consiste à utiliser la bibliothèque Curl pour envoyer le post� ...

Caractéristiques de sécurité du cadre: protection contre les vulnérabilités. Caractéristiques de sécurité du cadre: protection contre les vulnérabilités. Mar 28, 2025 pm 05:11 PM

L'article traite des fonctionnalités de sécurité essentielles dans les cadres pour se protéger contre les vulnérabilités, notamment la validation des entrées, l'authentification et les mises à jour régulières.

Frameworks de personnalisation / d'extension: comment ajouter des fonctionnalités personnalisées. Frameworks de personnalisation / d'extension: comment ajouter des fonctionnalités personnalisées. Mar 28, 2025 pm 05:12 PM

L'article examine l'ajout de fonctionnalités personnalisées aux cadres, en se concentrant sur la compréhension de l'architecture, l'identification des points d'extension et les meilleures pratiques pour l'intégration et le débogage.

See all articles