Wie konvertiere ich JSON-Daten mit PHP und MySQL in das HTML-Format?

Wie konvertiere ich JSON-Daten mit PHP und MySQL in das HTML-Format?

Bei der Webentwicklung müssen wir häufig die vom Backend über PHP und MySQL erhaltenen Daten im HTML-Format auf der Frontend-Seite präsentieren. Eines der am häufigsten verwendeten Datenformate ist JSON. In diesem Artikel wird die Verwendung von PHP und MySQL zum Konvertieren von JSON-Daten in das HTML-Format vorgestellt und entsprechende Codebeispiele bereitgestellt.

1. Datenbankvorbereitung

Zuerst muss die Datenbank vorbereitet und die entsprechenden Daten gespeichert werden. Nehmen wir als Beispiel MySQL an, wir haben eine Tabelle mit dem Namen „users“, in der der Name und das Alter des Benutzers gespeichert sind. Die Struktur der Tabelle ist wie folgt:

TABELLE Benutzer erstellen (

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

);

Fügen Sie einige Testdaten in die Tabelle ein:

INSERT INTO Benutzer (Name, Alter) VALUES ('Zhang San', 20);
INSERT INTO Benutzer (Name, Alter) VALUES ('李思', 25);
INSERT INTO Benutzer (Name, Alter) VALUES ('王五', 30);

2. PHP-Code zum Abrufen von JSON-Daten

Verwenden Sie PHP, um JSON-Daten aus der Datenbank abzurufen. Holen Sie sich die Daten und konvertieren Sie sie in das JSON-Format.

//Mit der Datenbank verbinden
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "test";
$conn = new mysqli ($ servername, $username, $password, $dbname);

// Überprüfen Sie, ob die Verbindung erfolgreich ist
if ($conn->connect_error) {

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

}

// Daten aus der Datenbank abrufen
$ sql = "SELECT * FROM users";
$result = $conn->query($sql);

// Daten in JSON-Format konvertieren
$data = array();
if ($result->num_rows > 0) {

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

}

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

// Schließen Sie die Datenbankverbindung
$conn->close();
?>

The Der obige Code stellt zunächst eine Verbindung zur Datenbank her und ruft die Daten der Tabelle „Benutzer“ ab. Fügen Sie dann jede Datenzeile über eine Schleife zu einem Array hinzu. Abschließend wird das Array über die Funktion json_encode() in das JSON-Format konvertiert und ein JSON-String ausgegeben.

3. Der Front-End-Code analysiert JSON-Daten und generiert HTML-Tabellen.

Auf der Front-End-Seite können wir JavaScript verwenden, um die vom Back-End erhaltenen JSON-Daten zu analysieren und in eine HTML-Tabelle umzuwandeln.

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

Der obige Code erstellt zunächst eine leere HTML-Tabelle und legt den Header fest. Rufen Sie dann die vom PHP-Skript zurückgegebenen JSON-Daten ab und analysieren Sie sie mithilfe der Funktion fetch() in ein JavaScript-Objekt. Als nächstes verwenden Sie forEach(), um jede Datenzeile zu durchlaufen, und verwenden Sie die Funktion createElement(), um die Zeilen der HTML-Tabelle zu erstellen. Fügen Sie abschließend den Wert jeder Datenzeile zur entsprechenden Zelle hinzu und fügen Sie die Zeile zur Tabelle hinzu.

Durch die oben genannten Schritte haben wir die Daten in der MySQL-Datenbank erfolgreich über PHP- und JSON-Formate in HTML-Tabellen konvertiert und sie auf der Front-End-Seite präsentiert.

Zusammenfassung:

In diesem Artikel wird die Methode zum Konvertieren von JSON-Daten in das HTML-Format mithilfe von PHP und MySQL vorgestellt und entsprechende Codebeispiele bereitgestellt. Auf diese Weise können wir die Daten einfach aus dem Backend abrufen und in einer leicht lesbaren Tabelle auf der Frontend-Seite anzeigen. Ich hoffe, dieser Artikel wird Ihnen bei der Verarbeitung von JSON-Daten und der Generierung von HTML-Tabellen in der Webentwicklung hilfreich sein.

Das obige ist der detaillierte Inhalt vonWie konvertiere ich JSON-Daten mit PHP und MySQL in das HTML-Format?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!