Cara membuat jadual data dinamik menggunakan MySQL dan JavaScript-tutorial mysql-php.cn

Cara membuat jadual data dinamik menggunakan MySQL dan JavaScript

王林

Lepaskan： 2023-09-21 11:36:22

asal

1148 orang telah melayarinya

Cara membuat jadual data dinamik menggunakan MySQL dan JavaScript

Ikhtisar:
Dalam pembangunan web moden, jadual data dinamik adalah komponen yang sangat biasa. Dengan menggunakan sistem pengurusan pangkalan data MySQL dan bahasa pengaturcaraan bahagian hadapan JavaScript, kami boleh membuat jadual data dinamik dengan mudah untuk memaparkan dan memanipulasi data dalam pangkalan data. Artikel ini akan memperkenalkan secara terperinci cara menggunakan MySQL dan JavaScript untuk mencipta jadual data dinamik dan menyediakan contoh kod khusus.

Langkah:

Buat pangkalan data dan jadual:
Pertama, kita perlu mencipta pangkalan data dalam MySQL dan mencipta jadual di dalamnya untuk menyimpan data yang perlu dipaparkan. Berikut ialah contoh mudah:

CREATE DATABASE my_database;
USE my_database;
CREATE TABLE my_table (
    id INT PRIMARY KEY AUTO_INCREMENT,
    name VARCHAR(50),
    age INT,
    email VARCHAR(100)
);

Salin selepas log masuk

Menyambung ke pangkalan data:
Seterusnya, kita perlu menggunakan JavaScript untuk menyambung ke pangkalan data MySQL. Biasanya, kami akan menggunakan pemacu rasmi MySQL (seperti node-mysql) untuk mencapai fungsi ini. Berikut ialah contoh kod untuk menyambung ke pangkalan data:

const mysql = require('mysql');

const connection = mysql.createConnection({
    host     : 'localhost',
    user     : 'your_username',
    password : 'your_password',
    database : 'my_database'
});

connection.connect((err) => {
    if (err) throw err;
    console.log('Connected to MySQL database');
});

Salin selepas log masuk

Sila pastikan untuk menggantikan nama_pengguna_anda dan kata laluan_anda dalam kod di atas dengan nama pengguna dan kata laluan MySQL anda yang sebenar. your_username和your_password替换为实际的MySQL用户名和密码。

查询数据库：
在连接数据库成功之后，我们可以使用JavaScript来查询数据库中的数据，并将其展示在数据表格中。以下是一个简单的查询数据库并展示数据的示例代码：

const sql = 'SELECT * FROM my_table';

connection.query(sql, (err, result) => {
    if (err) throw err;
    console.log('Fetched data from database:', result);

    // 将数据展示在表格中
    const table = document.getElementById('data-table');
    result.forEach((row) => {
        const newRow = table.insertRow();
        Object.values(row).forEach((value) => {
            const cell = newRow.insertCell();
            cell.innerHTML = value;
        });
    });
});

Salin selepas log masuk

在以上示例中，我们执行了一个简单的SELECT语句来获取数据库中的所有数据，并将其展示在一个id为data-table的HTML表格中。

其他操作：
除了查询数据之外，我们还可以使用JavaScript来执行其他数据库操作，例如插入、更新或删除数据。以下是一个插入数据的示例代码：

const sql = `INSERT INTO my_table (name, age, email) VALUES ('John', 25, 'john@example.com')`;

connection.query(sql, (err, result) => {
    if (err) throw err;
    console.log('Inserted a new row into the database');
});

Salin selepas log masuk

以上代码将在数据库的my_table

Selepas berjaya menyambung ke pangkalan data, kami boleh menggunakan JavaScript untuk menanyakan data dalam pangkalan data dan memaparkannya dalam jadual data. Berikut ialah contoh kod mudah untuk menanyakan pangkalan data dan memaparkan data:

my_table

Atas ialah kandungan terperinci Cara membuat jadual data dinamik menggunakan MySQL dan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!