PHP从Post表取数据渲染HTML无显示问题求助

核心问题梳理 #

• PHP循环仅赋值变量，未将帖子内容渲染到页面容器中，且循环结束后变量仅保留最后一条数据
• JS函数错误使用服务器端PHP变量，前端无法解析执行；添加新帖时未使用用户输入的内容
• 数据库查询字段不匹配：Post表无username、cmt_content字段，查询逻辑存在错误
• JS代码存在标签未闭合、类名重复的语法问题

修复步骤与代码示例 #

1. 修正PHP查询与页面渲染逻辑 #

先确保数据库查询语句匹配Post表字段，然后在循环内直接将帖子HTML输出到容器中（若需显示用户名，需关联用户表查询）：

<?php
// 示例：初始化数据库连接并执行查询
// $conn = new mysqli("localhost", "username", "password", "dbname");
// $select_post = $conn->query("SELECT post_id, user_id, content, post_date, likes, comments FROM Post");

if ($select_post->num_rows > 0) {
    while ($row = $select_post->fetch_assoc()) {
        $content = htmlspecialchars($row["content"]); // 转义内容防止XSS
        $likes = $row["likes"];
?>
        <div class="grid-item">
            <img src="https://placekitten.com/300/200" alt="Post Image">
            <div class="content">
                <p><?php echo $content ?></p>
            </div>
            <div class="post-meta">
                <span class="like-count"><?php echo $likes ?></span>
                <button class="interaction-btn" onclick="likePost(this)"><i class="fas fa-heart"></i></button>
            </div>
        </div>
<?php
    }
} else {
    echo "<div class='grid-item'>Nothing!.</div>";
}
?>
<div class="grid-container" id="gridContainer">
    <!-- PHP循环生成的帖子会直接输出到此处 -->
</div>

2. 修正JavaScript添加新帖函数 #

移除无效的PHP变量，改用用户输入的内容，同时修复语法问题：

function addNewPost() {
    var content = document.getElementById('postContent').value;
    if (!content.trim()) {
        alert('请输入帖子内容');
        return;
    }

    var newPost = document.createElement("div");
    newPost.className = "grid-item";

    // 使用JS变量填充内容，而非服务器端PHP变量
    newPost.innerHTML = `
        <img src="https://placekitten.com/300/200" alt="Post Image">
        <div class="content">
            <p>${content}</p>
        </div>
        <div class="post-meta">
            <span class="like-count">0</span>
            <button class="interaction-btn" onclick="likePost(this)"><i class="fas fa-heart"></i></button>
        </div>
    `;

    document.getElementById("gridContainer").appendChild(newPost);
    // 清空输入框
    document.getElementById('postContent').value = '';
}

3. 补充用户名查询逻辑（可选） #

若需显示发帖用户的用户名，需关联用户表（假设用户表名为User，包含user_id、username字段），修改查询语句：

$select_post = $conn->query("
    SELECT Post.*, User.username 
    FROM Post 
    JOIN User ON Post.user_id = User.user_id
");

内容的提问来源于stack exchange，提问作者Hao Ma