数据库应用-CSDN博客

本文链接：https://blog.csdn.net/qq_66996090/article/details/138764772

当涉及到在HTML中使用数据库时，通常需要借助后端技术和数据库管理系统来实现。下面是一种常见的方式，使用HTML、JavaScript、PHP和MySQL来展示如何进行数据库操作。

前端设计
首先，在HTML页面中设计用户界面，包括表单、按钮和其他交互元素，用于接收用户输入和触发数据库操作的请求。

html

<!DOCTYPE html>
<html>
<head>
    <title>HTML数据库操作</title>
    <script src="script.js"></script>
</head>
<body>
    <h1>用户信息</h1>
    <form id="userForm">
        <input type="text" id="username" placeholder="用户名">
        <input type="password" id="password" placeholder="密码">
        <button οnclick="submitForm()">提交</button>
    </form>

    <table id="usersTable">
        <tr>
            <th>用户名</th>
            <th>密码</th>
        </tr>
    </table>
</body>
</html>

在上述代码中，我们有一个表单用于输入用户名和密码，以及一个按钮用于提交表单数据。还有一个空的表格用于显示从数据库中检索到的用户信息。

后端处理
接下来，我们需要在后端使用PHP来处理前端发送的请求，并与MySQL数据库进行交互。

php

<?php
// 连接数据库
$servername = "localhost";
$username = "root";
$password = "your_password";
$database = "your_database";

$conn = new mysqli($servername, $username, $password, $database);

if ($conn->connect_error) {
    die("数据库连接失败：" . $conn->connect_error);
}

// 处理前端提交的表单数据
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $username = $_POST["username"];
    $password = $_POST["password"];

    // 将数据插入数据库
    $sql = "INSERT INTO users (username, password) VALUES ('$username', '$password')";
    if ($conn->query($sql) === TRUE) {
        echo "数据插入成功";
    } else {
        echo "数据插入失败：" . $conn->error;
    }
}

// 从数据库中检索用户信息
$sql = "SELECT * FROM users";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
        echo "<tr><td>" . $row["username"] . "</td><td>" . $row["password"] . "</td></tr>";
    }
} else {
    echo "没有找到用户信息";
}

$conn->close();
?>

在上述PHP代码中，我们首先建立与MySQL数据库的连接。然后，我们根据前端提交的数据将用户名和密码插入到数据库中。接着，我们从数据库中检索所有用户信息，并将其显示在HTML表格中。

JavaScript交互
最后，我们需要使用JavaScript来处理前端页面中的交互，并将数据呈现在页面上。

javascript

function submitForm() {
    var username = document.getElementById('username').value;
    var password = document.getElementById('password').value;

    var data = new FormData();
    data.append('username', username);
    data.append('password', password);

    fetch('backend.php', {
        method: 'POST',
        body: data
    })
    .then(response => response.text())
    .then(data => {
        alert(data);
        getUserData();
    });
}

function getUserData() {
    fetch('backend.php')
    .then(response => response.text())
    .then(data => {
        document.getElementById('usersTable').innerHTML += data;
    });
}