MySQLとJavaScriptを使用して動的データテーブルを作成する方法

2年 ago
夏樹, 風
1 minute

MySQLとJavaScriptを使用して動的データテーブルを作成するためのステップを以下に示します：

  1. 最初に、MySQLでデータベースを作成し、テーブルを作成します。MySQLのCLIツールまたはphpMyAdminなどのGUIツールを使用してこの手順を実行できます。たとえば、「employees」という名前のテーブルを作成し、「ID」、「名前」、「年齢」というフィールドを含めます。
  2. HTMLでテーブルのプレースホルダを作成する。HTMLの表タグ(
    )を使用して、空の表を作成する。
  3. MySQLデータベースからデータをJavaScriptのAJAXを使用して取得する。AJAXリクエストは、XMLHttpRequestオブジェクトまたはjQueryライブラリを使用して実装できる。この例では、jQueryの$.ajax関数がGETリクエストを送信してデータを取得する。
$.ajax({
url: 'fetch_data.php', // 指定从MySQL数据库中获取数据的PHP文件
method: 'GET',
success: function(data) {
// 在成功获取数据后，解析JSON数据并创建表格行
var employees = JSON.parse(data);
for (var i = 0; i < employees.length; i++) {
var row = $('<tr>');
row.append($('<td>').text(employees[i].ID));
row.append($('<td>').text(employees[i].姓名));
row.append($('<td>').text(employees[i].年龄));
$('table').append(row);
}
}
});
  1. MySQLデータベースからデータをフェッチしてJavaScriptに返すPHPファイル（例：fetch_data.php）を作成する。PHPファイルでは、まずMySQLデータベースへの接続を確立し、次にクエリステートメントを実行してデータをフェッチする。最後に、データをJSON形式に変換してJavaScriptに返す。
<?php
// 建立与MySQL数据库的连接
$connection = mysqli_connect('localhost', 'username', 'password', 'database_name');
// 执行查询语句以获取数据
$query = "SELECT * FROM employees";
$result = mysqli_query($connection, $query);
// 将数据转换为JSON格式并返回给JavaScript
$data = array();
while ($row = mysqli_fetch_assoc($result)) {
$data[] = $row;
}
echo json_encode($data);
// 关闭与MySQL数据库的连接
mysqli_close($connection);
?>
  1. 上記のコードをHTMLファイルとして保存し、ブラウザで開きます。ブラウザはデータを要求するAJAXリクエストを送信し、データをテーブルに記入します。

これにより、MySQL と JavaScript を使用して動的データテーブルを作成できます。

bannerAds