html控件如何连接数据库

HTML控件与数据库连接的实现原理

HTML本身是标记语言,无法直接操作数据库，需通过以下流程实现：

CREATE DATABASE user_db;
USE user_db;
CREATE TABLE users (
id INT AUTO_INCREMENT PRIMARY KEY,
username VARCHAR(50) NOT NULL,
email VARCHAR(100) NOT NULL
);

前端HTML表单

<form id="registerForm">
    <input type="text" name="username" placeholder="用户名" required>
    <input type="email" name="email" placeholder="邮箱" required>
    <button type="submit">提交</button>
</form>

后端PHP处理逻辑

<?php
// 连接数据库
$host = 'localhost';
$dbname = 'user_db';
$username = 'root';
$password = '';
try {
    $pdo = new PDO("mysql:host=$host;dbname=$dbname", $username, $password);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    // 获取表单数据
    $user = $_POST['username'];
    $email = $_POST['email'];
    // 插入数据（预处理防止SQL注入）
    $stmt = $pdo->prepare("INSERT INTO users (username, email) VALUES (?, ?)");
    $stmt->execute([$user, $email]);
    echo "注册成功！";
} catch (PDOException $e) {
    echo "错误: " . $e->getMessage();
}
?>

前端与后端交互（AJAX示例）

document.getElementById('registerForm').addEventListener('submit', function(e) {
    e.preventDefault(); // 阻止表单默认提交
    const formData = new FormData(this);
    fetch('register.php', { method: 'POST', body: formData })
        .then(response => response.text())
        .then(data => alert(data))
        .catch(err => console.error(err));
});

技术对比表格

安全注意事项

1. SQL注入防护

   • 使用预处理语句（如PDO的prepare()）替代直接拼接SQL。
   • 示例：$stmt->execute([$user, $email])而非"INSERT INTO users VALUES ('$user', '$email')"。

2. 前端输入验证

   echo htmlspecialchars($userInput, ENT_QUOTES, 'UTF-8');

问题2：前端框架（如React）如何与数据库通信？

解答：

1. 前端：通过Axios/Fetch发送API请求。

   axios.post('/api/users', { username, email })
       .then(res => console.log(res.data));

2. 后端：提供RESTful API接口（如Express.js）。

   app.post('/api/users', (req, res) => {
       const { username, email } = req.body;
       // 数据库操作...
       res.send('用户已保存');
   });