HTML不能直接访问数据库，使用服务器端脚本、使用API、结合JavaScript和AJAX技术。要实现HTML页面与数据库的交互，通常需要借助服务器端脚本语言（如PHP、Node.js）、API接口以及AJAX等技术。下面将详细描述使用服务器端脚本的方法。
HTML本身是一种标记语言，用于定义网页的结构和内容，并不能直接与数据库进行交互。为了让HTML页面能够访问数据库，通常会借助服务器端脚本语言（如PHP、Node.js）、API接口以及AJAX等技术。下面将详细描述如何通过这几种方法实现HTML页面与数据库的交互。
一、使用服务器端脚本
1. PHP与MySQL
PHP是一种流行的服务器端脚本语言，常与MySQL数据库一起使用来创建动态网页。要通过HTML页面访问MySQL数据库，可以按照以下步骤进行：
1.1 创建数据库和表
首先，需要在MySQL中创建一个数据库和相应的表。例如，创建一个名为example_db的数据库，并在其中创建一个名为users的表：
CREATE DATABASE example_db;
USE example_db;
CREATE TABLE users (
id INT AUTO_INCREMENT PRIMARY KEY,
username VARCHAR(50) NOT NULL,
email VARCHAR(100) NOT NULL
);
1.2 编写PHP脚本
接下来，编写一个PHP脚本来连接数据库，并执行查询操作。例如，创建一个名为fetch_users.php的文件，内容如下：
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "example_db";
// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);
// 检查连接
if ($conn->connect_error) {
die("连接失败: " . $conn->connect_error);
}
// 执行查询
$sql = "SELECT id, username, email FROM users";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// 输出数据
while($row = $result->fetch_assoc()) {
echo "id: " . $row["id"]. " - Name: " . $row["username"]. " - Email: " . $row["email"]. "<br>";
}
} else {
echo "0 结果";
}
$conn->close();
?>
1.3 编写HTML页面
最后，创建一个HTML页面来显示从数据库中获取的数据。例如，创建一个名为index.html的文件，内容如下：
<!DOCTYPE html>
<html>
<head>
<title>用户列表</title>
</head>
<body>
<h1>用户列表</h1>
<div id="user-list">
<?php include 'fetch_users.php'; ?>
</div>
</body>
</html>
2. Node.js与MongoDB
Node.js是一种基于JavaScript的服务器端运行环境，常与NoSQL数据库MongoDB一起使用。要通过HTML页面访问MongoDB数据库，可以按照以下步骤进行：
2.1 安装Node.js和MongoDB
首先，需要安装Node.js和MongoDB。可以从官方网站下载并安装它们。
2.2 创建数据库和集合
使用MongoDB客户端（如MongoDB Compass）创建一个名为example_db的数据库，并在其中创建一个名为users的集合。
2.3 编写Node.js脚本
接下来，编写一个Node.js脚本来连接数据库，并执行查询操作。例如，创建一个名为fetch_users.js的文件，内容如下：
const MongoClient = require('mongodb').MongoClient;
const url = "mongodb://localhost:27017/";
const dbName = "example_db";
MongoClient.connect(url, { useNewUrlParser: true, useUnifiedTopology: true }, function(err, client) {
if (err) throw err;
const db = client.db(dbName);
db.collection("users").find({}).toArray(function(err, result) {
if (err) throw err;
console.log(result);
client.close();
});
});
2.4 使用Express创建服务器
使用Express框架创建一个简单的Web服务器，并定义一个API端点来返回用户数据。例如，创建一个名为server.js的文件，内容如下：
const express = require('express');
const app = express();
const MongoClient = require('mongodb').MongoClient;
const url = "mongodb://localhost:27017/";
const dbName = "example_db";
app.get('/users', (req, res) => {
MongoClient.connect(url, { useNewUrlParser: true, useUnifiedTopology: true }, function(err, client) {
if (err) throw err;
const db = client.db(dbName);
db.collection("users").find({}).toArray(function(err, result) {
if (err) throw err;
res.json(result);
client.close();
});
});
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
2.5 编写HTML页面
最后，创建一个HTML页面，通过AJAX请求从API端点获取数据。例如，创建一个名为index.html的文件，内容如下：
<!DOCTYPE html>
<html>
<head>
<title>用户列表</title>
<script>
document.addEventListener("DOMContentLoaded", function() {
fetch('/users')
.then(response => response.json())
.then(data => {
let userList = document.getElementById('user-list');
data.forEach(user => {
let userItem = document.createElement('div');
userItem.textContent = `id: ${user._id} - Name: ${user.username} - Email: ${user.email}`;
userList.appendChild(userItem);
});
});
});
</script>
</head>
<body>
<h1>用户列表</h1>
<div id="user-list"></div>
</body>
</html>
二、使用API
1. RESTful API
使用RESTful API是一种常见的方式来实现HTML页面与数据库的交互。RESTful API是一种轻量级的Web服务，通常使用HTTP协议来传输数据。可以使用各种语言和框架来创建RESTful API，如Java、Python、Ruby等。
1.1 创建RESTful API
例如，使用Python的Flask框架创建一个简单的RESTful API：
from flask import Flask, jsonify
from flask_pymongo import PyMongo
app = Flask(__name__)
app.config["MONGO_URI"] = "mongodb://localhost:27017/example_db"
mongo = PyMongo(app)
@app.route('/users', methods=['GET'])
def get_users():
users = mongo.db.users.find()
result = []
for user in users:
result.append({'id': str(user['_id']), 'username': user['username'], 'email': user['email']})
return jsonify(result)
if __name__ == '__main__':
app.run(debug=True)
1.2 编写HTML页面
然后，编写一个HTML页面，通过AJAX请求从API端点获取数据：
<!DOCTYPE html>
<html>
<head>
<title>用户列表</title>
<script>
document.addEventListener("DOMContentLoaded", function() {
fetch('/users')
.then(response => response.json())
.then(data => {
let userList = document.getElementById('user-list');
data.forEach(user => {
let userItem = document.createElement('div');
userItem.textContent = `id: ${user.id} - Name: ${user.username} - Email: ${user.email}`;
userList.appendChild(userItem);
});
});
});
</script>
</head>
<body>
<h1>用户列表</h1>
<div id="user-list"></div>
</body>
</html>
2. GraphQL API
GraphQL是一种新型的API查询语言，允许客户端灵活地请求所需的数据。可以使用各种语言和框架来创建GraphQL API，如JavaScript、Python、Ruby等。
2.1 创建GraphQL API
例如，使用Node.js的Apollo Server创建一个简单的GraphQL API：
const { ApolloServer, gql } = require('apollo-server');
const { MongoClient } = require('mongodb');
const typeDefs = gql`
type User {
id: ID!
username: String!
email: String!
}
type Query {
users: [User]
}
`;
const resolvers = {
Query: {
users: async () => {
const client = await MongoClient.connect('mongodb://localhost:27017', { useNewUrlParser: true, useUnifiedTopology: true });
const db = client.db('example_db');
const users = await db.collection('users').find().toArray();
client.close();
return users.map(user => ({
id: user._id,
username: user.username,
email: user.email
}));
}
}
};
const server = new ApolloServer({ typeDefs, resolvers });
server.listen().then(({ url }) => {
console.log(`🚀 Server ready at ${url}`);
});
2.2 编写HTML页面
然后，编写一个HTML页面，通过GraphQL请求从API端点获取数据：
<!DOCTYPE html>
<html>
<head>
<title>用户列表</title>
<script>
document.addEventListener("DOMContentLoaded", function() {
fetch('http://localhost:4000/', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
query: `
query {
users {
id
username
email
}
}
`
})
})
.then(response => response.json())
.then(data => {
let userList = document.getElementById('user-list');
data.data.users.forEach(user => {
let userItem = document.createElement('div');
userItem.textContent = `id: ${user.id} - Name: ${user.username} - Email: ${user.email}`;
userList.appendChild(userItem);
});
});
});
</script>
</head>
<body>
<h1>用户列表</h1>
<div id="user-list"></div>
</body>
</html>
三、结合JavaScript和AJAX技术
AJAX（Asynchronous JavaScript and XML）是一种用于在不重新加载整个网页的情况下，与服务器进行异步通信的技术。通过AJAX，可以在后台与服务器交换数据，并在网页上动态更新内容。以下是一个简单的示例，展示如何使用AJAX从服务器获取数据并更新HTML页面。
1. 编写服务器端脚本
首先，编写一个简单的服务器端脚本来返回JSON格式的数据。例如，使用Node.js和Express创建一个API端点：
const express = require('express');
const app = express();
app.get('/users', (req, res) => {
const users = [
{ id: 1, username: 'user1', email: 'user1@example.com' },
{ id: 2, username: 'user2', email: 'user2@example.com' }
];
res.json(users);
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
2. 编写HTML页面
接下来，编写一个HTML页面，通过AJAX请求从API端点获取数据，并动态更新页面内容：
<!DOCTYPE html>
<html>
<head>
<title>用户列表</title>
<script>
document.addEventListener("DOMContentLoaded", function() {
const xhr = new XMLHttpRequest();
xhr.open('GET', '/users', true);
xhr.onload = function() {
if (xhr.status >= 200 && xhr.status < 300) {
const data = JSON.parse(xhr.responseText);
let userList = document.getElementById('user-list');
data.forEach(user => {
let userItem = document.createElement('div');
userItem.textContent = `id: ${user.id} - Name: ${user.username} - Email: ${user.email}`;
userList.appendChild(userItem);
});
}
};
xhr.send();
});
</script>
</head>
<body>
<h1>用户列表</h1>
<div id="user-list"></div>
</body>
</html>
通过上述步骤，可以实现HTML页面与数据库的交互。无论是使用服务器端脚本、API还是AJAX技术，都需要确保数据的安全性和完整性。如果涉及到复杂的项目管理需求，还可以使用专业的项目团队管理系统，如研发项目管理系统PingCode和通用项目协作软件Worktile，来提高团队协作效率和项目管理效果。
相关问答FAQs：
1. HTML如何连接数据库并访问数据？
HTML本身是一种用于创建网页的标记语言，它不能直接连接和访问数据库。要实现HTML与数据库的连接，您需要使用其他编程语言（如PHP、Python等）来处理数据库操作，并将结果嵌入到HTML页面中。
2. 什么是数据库？为什么在网页开发中需要使用数据库？
数据库是一个用于存储和管理数据的系统。在网页开发中，数据库可以用来存储用户信息、商品信息、文章内容等数据。使用数据库可以方便地对数据进行增删改查操作，提高网页的交互性和实用性。
3. 如何在网页中显示数据库中的数据？
要在网页中显示数据库中的数据，您可以使用服务器端编程语言（如PHP、Python等）来连接数据库并查询数据，然后将查询结果嵌入到HTML页面中。可以通过编写SQL查询语句来筛选所需的数据，并使用编程语言的循环结构将数据逐条显示在网页上。
原创文章，作者：Edit2，如若转载，请注明出处：https://docs.pingcode.com/baike/1735239
