个人网站留言页面（前端jQuery编写、后台php读写MySQL）

2023年6月11日下午12:05 • JavaScript

下面给出关于“个人网站留言页面（前端jQuery编写、后台php读写MySQL）”的完整攻略。

步骤一：数据库设计

首先需要通过设计数据库来存储留言信息。假设我们需要存储“留言者姓名”、“留言内容”、“留言时间”等信息，可以创建一个名为"messageBoard"的MySQL数据库，并在其中新建一个名为"messages"的表来存储留言。

CREATE DATABASE messageBoard;
USE messageBoard;
CREATE TABLE messages (
    id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(30) NOT NULL,
    message TEXT NOT NULL,
    time TIMESTAMP
)

步骤二：建立前端页面

接下来，通过jQuery库完成前端页面的开发。我们需要实现一个表单，让用户输入姓名和留言内容并提交，同时从后台读取已有留言展示在页面上。以下是示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>留言板</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
    <h1>留言板</h1>
    <form>
        <label for="name">姓名：</label>
        <input type="text" id="name" name="name" required><br>

        <label for="message">留言：</label>
        <textarea id="message" name="message" rows="4" cols="50" required></textarea><br>

        <button type="button" id="submit">提交</button>
    </form>

    <div id="messageList">
        <h3>已有留言：</h3>
        <ul></ul>
    </div>

    <script>
        $(function() {
            // 获取数据库中原有留言
            $.getJSON("get_messages.php", function(data) {
                data.forEach(function(message) {
                    $("#messageList ul").append("<li>" + message.name + "：" + message.message + "</li>");
                })
            });

            // 提交留言
            $("#submit").click(function() {
                $.post("add_message.php", {
                    name: $("#name").val(),
                    message: $("#message").val()
                }, function() {
                    alert("留言成功！");
                    location.reload();
                });
            });
        });
    </script>
</body>
</html>

步骤三：建立后台接口

为了能够读取数据库以及将用户提交的留言存储到数据库中，我们需要建立与后台的接口。具体而言，需要编写两个PHP脚本，分别用于读取数据库中已有的留言，以及向数据库中添加新的留言。

get_messages.php

<?php

$servername = "localhost"; // 数据库服务器名
$username = "root"; // 数据库用户名
$password = ""; // 数据库密码
$dbname = "messageBoard"; // 数据库名

// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);

// 检查连接是否成功
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}

// 从数据库中选择所有留言
$sql = "SELECT name, message FROM messages";
$result = $conn->query($sql);

// 将查询结果转化为JSON字符串返回给前端
$rows = array();
while($row = $result->fetch_assoc()) {
    $rows[] = $row;
}
echo json_encode($rows);

// 关闭连接
$conn->close();

?>

add_message.php

<?php

$servername = "localhost"; // 数据库服务器名
$username = "root"; // 数据库用户名
$password = ""; // 数据库密码
$dbname = "messageBoard"; // 数据库名

// 获取前端提交的留言信息
$name = $_POST["name"];
$message = $_POST["message"];

// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);

// 检查连接是否成功
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}

// 向数据库中插入新留言
$sql = "INSERT INTO messages (name, message) VALUES ('$name', '$message')";
$conn->query($sql);

// 关闭连接
$conn->close();

?>