PHP と MySQL を使用して JSON データを HTML 形式に変換するにはどうすればよいですか?

PHP と MySQL はどのようにして JSON データを HTML 形式に変換しますか?

Web 開発では、PHP および MySQL を通じてバックエンドで取得したデータを HTML 形式でフロントエンド ページに表示する必要がよく発生します。一般的に使用されるデータ形式の 1 つは JSON です。この記事では、PHP と MySQL を使用して JSON データを HTML 形式に変換する方法と、対応するコード例を紹介します。

1. データベースの準備

まず、データベースを準備し、対応するデータを保存する必要があります。 MySQL を例として、ユーザーの名前と年齢の情報を保存する「users」という名前のテーブルがあるとします。テーブルの構造は次のとおりです:

CREATE TABLE users (

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

);

テスト データをテーブルに挿入します:

INSERT INTOユーザー (名前、年齢) VALUES ('Zhang San', 20);
ユーザー (名前、年齢) VALUES ('Li Si', 25);
ユーザー (名前、年齢) VALUES ( '王五' , 30);

2. JSON データを取得するための PHP コード

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 文字列が出力されます。

3. フロントエンド コードは JSON データを解析し、HTML テーブルを生成します

フロントエンド ページでは、JavaScript を使用してバックエンドから取得した JSON データを解析できます。 -end して変換します。 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>

上記のコードは、まず空の HTML テーブルを作成し、ヘッダーを設定します。次に、PHP スクリプトから返された JSON データを取得し、 fetch() 関数を使用してそれを JavaScript オブジェクトに解析します。次に、forEach() を使用してデータの各行をループし、createElement() 関数を使用して HTML テーブルの行を作成します。最後に、データの各行の値を対応するセルに追加し、その行をテーブルに追加します。

上記の手順により、MySQL データベース内のデータを PHP および JSON 形式で HTML テーブルに変換し、フロントエンド ページに表示することができました。

概要:

この記事では、PHP と MySQL を使用して JSON データを HTML 形式に変換する方法を紹介し、対応するコード例を示します。このようにして、バックエンドからデータを簡単に取得し、フロントエンド ページの読みやすい表に表示できます。この記事が、Web 開発における JSON データの処理と HTML テーブルの生成に役立つことを願っています。

以上がPHP と MySQL を使用して JSON データを HTML 形式に変換するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。