正文

JavaScript往HTML文件列表中写入数据库：轻松实现动态数据展示与交互

/0 浏览量
0527

在网页开发中，我们经常需要将数据从HTML文件中动态展示给用户，并且与用户进行交互。而JavaScript作为一种前端脚本语言，是实现这一功能的重要工具。本文将介绍如何使用JavaScript将数据写入数据库，并在HTML文件列表中展示这些数据。

数据库的选择

在开始之前，我们需要选择一个合适的数据库来存储数据。目前市面上有很多数据库可供选择，如MySQL、MongoDB、SQLite等。根据实际需求，我们可以选择适合的数据库。以下以MySQL为例进行说明。

数据库连接

首先，我们需要使用JavaScript连接到MySQL数据库。这里我们可以使用mysql模块，这是一个流行的Node.js模块，可以方便地与MySQL数据库进行交互。

const mysql = require('mysql');

const connection = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: 'root',
  database: 'test'
});

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

数据插入

连接到数据库后，我们可以使用JavaScript向数据库中插入数据。以下是一个示例，演示如何将数据插入到名为users的表中：

const query = 'INSERT INTO users SET ?';
const data = {
  username: 'tom',
  email: 'tom@example.com'
};

connection.query(query, data, (err, results) => {
  if (err) throw err;
  console.log('Data inserted successfully!');
});

数据查询

插入数据后，我们可以使用JavaScript查询数据库中的数据。以下是一个示例，演示如何查询users表中的所有数据：

const query = 'SELECT * FROM users';

connection.query(query, (err, results) => {
  if (err) throw err;
  console.log(results);
});

数据展示

在HTML文件中，我们可以使用JavaScript将查询到的数据动态展示在列表中。以下是一个示例：

<!DOCTYPE html>
<html>
<head>
  <title>用户列表</title>
</head>
<body>
  <h1>用户列表</h1>
  <ul id="userList"></ul>

  <script>
    const userList = document.getElementById('userList');
    const query = 'SELECT * FROM users';

    connection.query(query, (err, results) => {
      if (err) throw err;
      results.forEach(user => {
        const li = document.createElement('li');
        li.textContent = `${user.username} (${user.email})`;
        userList.appendChild(li);
      });
    });
  </script>
</body>
</html>

数据交互

为了实现与用户的交互，我们可以为列表中的每个用户添加一个删除按钮。以下是一个示例：

<!DOCTYPE html>
<html>
<head>
  <title>用户列表</title>
</head>
<body>
  <h1>用户列表</h1>
  <ul id="userList"></ul>

  <script>
    const userList = document.getElementById('userList');
    const query = 'SELECT * FROM users';

    connection.query(query, (err, results) => {
      if (err) throw err;
      results.forEach(user => {
        const li = document.createElement('li');
        li.textContent = `${user.username} (${user.email})`;
        const delBtn = document.createElement('button');
        delBtn.textContent = '删除';
        delBtn.onclick = () => {
          const confirm = window.confirm('确认删除该用户？');
          if (confirm) {
            const delQuery = 'DELETE FROM users WHERE id = ?';
            connection.query(delQuery, [user.id], (err, results) => {
              if (err) throw err;
              li.remove();
            });
          }
        };
        li.appendChild(delBtn);
        userList.appendChild(li);
      });
    });
  </script>
</body>
</html>

通过以上步骤，我们可以使用JavaScript将数据写入数据库，并在HTML文件列表中展示这些数据，同时实现与用户的交互。这样，我们就可以轻松实现动态数据展示与交互。

-- 展开阅读全文 --