当前位置：首页 > 前端开发 > 正文

html中如何操作数据库

admin
前端开发
2025-08-09
21

ML 本身无法直接操作数据库，你需要结合服务器端语言（如 PHP、Python、Node.

HTML中如何操作数据库

在现代Web开发中，HTML主要负责页面的结构和展示，而数据库操作通常由后端技术完成，通过一些技术和工具，HTML页面也可以与数据库进行交互，以下是详细的步骤和方法,帮助你理解如何在HTML中操作数据库。

理解基本概念

HTML

HTML（HyperText Markup Language）是用于创建网页的标准标记语言，它定义了网页的结构和内容,但不直接处理数据或逻辑。

数据库

数据库是用于存储和管理数据的系统，常见的数据库类型包括关系型数据库（如MySQL、PostgreSQL）和NoSQL数据库（如MongoDB）。

后端技术

后端技术（如PHP、Node.js、Python等）负责处理业务逻辑、与数据库交互，并将结果返回给前端（HTML页面）。

使用后端技术与数据库交互

1 选择后端技术

根据项目需求选择合适的后端技术。

PHP：适用于LAMP栈（Linux, Apache, MySQL, PHP）。
Node.js：适用于实时应用和高并发场景。
Python：适用于Django或Flask框架。

2 建立数据库连接

以Node.js和MySQL为例,首先需要安装必要的依赖库：

npm install express mysql

创建一个Express服务器并连接到MySQL数据库：

3 创建API端点

在服务器端创建API端点，用于处理前端请求并与数据库交互,获取用户数据的API：

html中如何操作数据库第1张

在HTML中调用API

1 使用Fetch API

在HTML页面中，可以使用Fetch API来调用后端API并获取数据：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">Fetch API Example</title> </head> <body> <h1>User List</h1> <ul id="userList"></ul> <script> fetch('/api/users') .then(response => response.json()) .then(data => { const userList = document.getElementById('userList'); data.forEach(user => { const li = document.createElement('li'); li.textContent = user.name; userList.appendChild(li); }); }) .catch(error => console.error('Error:', error)); </script> </body> </html>

2 使用AJAX

AJAX（Asynchronous JavaScript and XML）是另一种在HTML中与服务器异步通信的方式,以下是使用jQuery的示例：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">AJAX Example</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <h1>User List</h1> <ul id="userList"></ul> <script> $.ajax({ url: '/api/users', method: 'GET', success: function(data) { const userList = $('#userList'); data.forEach(user => { userList.append('<li>' + user.name + '</li>'); }); }, error: function(error) { console.error('Error:', error); } }); </script> </body> </html>

提交数据到数据库

1 创建表单

在HTML中创建一个表单,用于提交数据：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">Submit Form</title> </head> <body> <h1>Add User</h1> <form id="addUserForm"> <label for="name">Name:</label> <input type="text" id="name" name="name" required> <button type="submit">Add User</button> </form> <script> document.getElementById('addUserForm').addEventListener('submit', function(event) { event.preventDefault(); const name = document.getElementById('name').value; fetch('/api/users', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name }) }) .then(response => response.json()) .then(data => { console.log('User added:', data); }) .catch(error => console.error('Error:', error)); }); </script> </body> </html>

2 处理POST请求

在服务器端处理POST请求,并将数据插入数据库：

app.post('/api/users', (req, res) => { const { name } = req.body; db.query('INSERT INTO users (name) VALUES (?)', [name], (err, results) => { if (err) throw err; res.json({ id: results.insertId, name }); }); });

更新和删除数据

1 更新数据

在HTML中创建一个表单,用于更新用户数据：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">Update User</title> </head> <body> <h1>Update User</h1> <form id="updateUserForm"> <label for="id">ID:</label> <input type="number" id="id" name="id" required> <label for="name">Name:</label> <input type="text" id="name" name="name" required> <button type="submit">Update User</button> </form> <script> document.getElementById('updateUserForm').addEventListener('submit', function(event) { event.preventDefault(); const id = document.getElementById('id').value; const name = document.getElementById('name').value; fetch(`/api/users/${id}`, { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name }) }) .then(response => response.json()) .then(data => { console.log('User updated:', data); }) .catch(error => console.error('Error:', error)); }); </script> </body> </html>

在服务器端处理PUT请求,并更新数据库：

html中如何操作数据库第2张

2 删除数据

在HTML中创建一个按钮,用于删除用户：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">Delete User</title> </head> <body> <h1>Delete User</h1> <form id="deleteUserForm"> <label for="id">ID:</label> <input type="number" id="id" name="id" required> <button type="submit">Delete User</button> </form> <script> document.getElementById('deleteUserForm').addEventListener('submit', function(event) { event.preventDefault(); const id = document.getElementById('id').value; fetch(`/api/users/${id}`, { method: 'DELETE' }) .then(response => response.json()) .then(data => { console.log('User deleted:', data); }) .catch(error => console.error('Error:', error)); }); </script> </body> </html>

在服务器端处理DELETE请求,并删除数据库中的记录：

app.delete('/api/users/:id', (req, res) => { const { id } = req.params; db.query('DELETE FROM users WHERE id = ?', [id], (err, results) => { if (err) throw err; res.json({ id }); }); });

使用ORM简化数据库操作

1 什么是ORM？

ORM（Object-Relational Mapping）是一种将对象与数据库表映射的技术，它允许开发者使用面向对象的方式来操作数据库,而不需要编写SQL语句。

2 使用Sequelize（Node.js）

以Node.js和Sequelize为例,首先安装Sequelize和MySQL驱动：

npm install sequelize mysql2

配置Sequelize并定义模型：

const { Sequelize, DataTypes } = require('sequelize'); const sequelize = new Sequelize('mysql://root:password@localhost:3306/mydb'); const User = sequelize.define('User', { name: { type: DataTypes.STRING, allowNull: false } }); sequelize.sync();

使用模型进行CRUD操作：

html中如何操作数据库第3张

// Create User.create({ name: 'John Doe' }).then(user => { console.log('User created:', user); }); // Read User.findAll().then(users => { console.log('Users:', users); }); // Update User.update({ name: 'Jane Doe' }, { where: { id: 1 } }).then(() => { console.log('User updated'); }); // Delete User.destroy({ where: { id: 1 } }).then(() => { console.log('User deleted'); });