PHP+jQuery实现无刷新留言板的完整代码示例

小岛来信

发布时间：2026-10-13 | 6人浏览过

原创

本文将详细解析如何使用 PHP 结合 AJAX 技术实现一个无刷新的留言板系统。内容涵盖后端数据库配置、前端页面渲染以及利用 JavaScript（原文使用原生 XMLHttpRequest，建议在实际应用中替换为 jQuery 以简化代码）进行异步数据提交的具体流程，提供可直接参考的代码模板。

准备环境与数据库

在开始编码之前，需要确保服务器环境支持 PHP 和 MySQL。我们需要建立一个简单的数据库来存储留言信息。

创建数据库表：创建一个名为 demo 的数据库，并在其中建立 bbs_post 表。该表至少包含以下字段：
- id: 留言唯一标识（自增）
- title: 留言标题（文本）
- username: 用户昵称（文本）
- content: 留言内容（长文本）
- threadid: 主题ID（默认为1）
配置数据库连接：创建一个 conn.php 文件用于统一管理数据库连接。注意，示例中使用了较老的 mysql_connect 接口，在生产环境中建议使用 mysqli 或 PDO 以确保安全与兼容。

<?php
$conn = @mysql_connect("localhost", "root", "root") or die("MySql连接错误");
mysql_select_db("demo", $conn);
mysql_query("set names 'utf8'");
?>

前端页面结构与数据读取

主页 index.php 负责显示现有留言并放置提交表单。我们通过查询数据库将历史留言循环输出到 HTML 结构中。

核心逻辑如下：

引入 conn.php 获取数据库连接。
执行 SQL 查询 select * from bbs_post where threadid='1' order by id asc 获取所有属于当前主题的留言。
遍历结果集，将每条留言渲染为一个带有特定类名（如 .post）的 div 元素。

表单部分包含了姓名、标题和内容的输入框，并通过隐藏的 input 标签标记主题 ID。为了方便交互，需要引用 bbs.js。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link href="bbs.css" type="text/css" rel="stylesheet">
    <title>无刷新显示回帖</title>
    <script src="bbs.js" type="text/javascript"></script>
</head>

<body>
    <div id="thread">
        <?php
        include("conn.php");
        // 查询并输出历史留言
        $sql = "select * from `bbs_post` where `threadid` ='1' order by id asc";
        $query = mysql_query($sql);
        while($row = mysql_fetch_array($query)){ 
        ?>
         <div class="post" id="post<?php echo $row['id'];?>">
            <div class="post_title"><?php echo $row['title'];?> [<?php echo $row['username'];?>]</div>
            <div class="post_content"><pre><?php echo $row['content'];?></pre></div>
           </div>
        <?php
        }
        ?>
    </div>

    <!-- 回复表单区域 -->
    <table class="reply">
        <tr>
         <td colspan="2" class="title">回帖<input type="hidden" name="threadid" id="threadid" value="1"></td>
        </tr>
        <tr>
         <td>姓名：</td>
         <td><input type="text" name="username" id="username"></td>
        </tr>
        <tr>
         <td>标题：</td>
         <td><input type="text" name="post_title" id="post_title"></td>
        </tr>
        <tr>
         <td>内容：</td>
         <td><textarea name="post_content" id="post_content"></textarea></td>
        </tr>
        <tr>
         <td colspan="2"><input type="button" onclick="submitPost()" value="提交"></td>
        </tr>
    </table>
</body>
</html>

后端数据处理接口

bbspost.php 是接收前台 AJAX 请求的文件。它的功能非常纯粹：接收数据、存入数据库、返回新记录的 ID 或状态。

通过 $_POST 数组获取前端传递的 title、content、username 和 threadid。
执行 INSERT 语句将数据写入 bbs_post 表。
使用 mysql_insert_id() 获取刚刚插入的数据 ID，并将其作为响应回传给前端。这个 ID 将用于前端动态生成 DOM 节点。

<?php
include("conn.php");
$title = $_POST["title"]; 
$content = $_POST["content"]; 
$username = $_POST["username"]; 
$threadId = $_POST["threadid"];

// 执行插入操作
$sql = "insert into bbs_post (title,content,username,threadid) " .
       "values ('$title','$content','$username','$threadId')";
mysql_query($sql);

// 传回最后一次使用 INSERT 指令的 ID
$responseId = mysql_insert_id();
echo $responseId;
?>

AJAX 异步交互实现

核心难点在于 JS 如何在不刷新页面的情况下发送数据并更新视图。原稿中采用了原生的 XMLHttpRequest 对象。为了在现代浏览器中更好地运作并保证代码清晰，建议理解其原理后使用 jQuery 的 $().ajax() 替代。

第1步：构建 XMLHttpRequest 对象

由于浏览器的兼容性差异，需要根据是否存在 window.XMLHttpRequest 来创建不同的实例对象（IE老版本使用 ActiveXObject）。

第2步：封装提交函数 submitPost

当用户点击“提交”按钮时触发此函数：

首先调用 checkForm() 验证输入是否为空。
实例化 xmlHttp 对象。
设置状态监听：onreadystatechange 指向回调函数 submitPostCallBack。
打开连接：open("POST", "bbspost.php", true)。
设置请求头：setRequestHeader 声明内容为 URL 编码格式。
发送数据：send() 方法中将参数拼接为 key=value&...=... 格式。

第3步：处理响应与DOM更新

当服务端完成插入并返回 ID 后，回调函数被触发：

检查 xmlHttp.readyState == 4（表示请求完成）。
调用 createNewPost(postId) 函数。
该函数会在 #thread 容器内创建一个新的 div.post 元素，填入对应的标题、用户名和内容。
清空表单中的输入框，等待下一次留言。

// 使用jQuery推荐的Ajax写法替代原生XMLHttpRequest会更简洁
function submitPost() {
    var username = $("#username").val();
    var title = $("#post_title").val();
    var content = $("#post_content").val();
    var threadid = $("#threadid").val();

    if(!checkForm()) return;

    $.ajax({
        url: "bbspost.php",
        type: "POST",
        data: {username: username, title: title, content: content, threadid: threadid},
        success: function(responseId){
            createNewPost(title, username, content, responseId);
            // 清空表单
            $("#username,#post_title,#post_content").val("");
        }
    });
}