使用 PHP 和 AJAX/JSON 将数据传递到 JavaScript 的教程

<?php
// 假设 $connection 是有效的数据库连接
function retrieve_post($connection) {
    $sql = "SELECT * FROM tbl_user_posts";
    $result = mysqli_query($connection, $sql);

    // 检查查询是否成功
    if (!$result) {
        die("Query failed: " . mysqli_error($connection));
    }

    // 检查结果集是否为空
    if (mysqli_num_rows($result) > 0) {
        // 将结果集转换为关联数组
        $data = mysqli_fetch_all($result, MYSQLI_ASSOC);

        // 将关联数组编码为 JSON 格式
        echo json_encode($data);
    } else {
        // 如果结果集为空，返回一个空数组的 JSON
        echo json_encode([]);
    }
}
?>

function displayPosts() {
    $.ajax({
        type: "POST",
        url: "main_page.php", // 确保 URL 正确
        dataType: "json", // 明确指定期望的数据类型为 JSON
        success: function(response) {
            // response 已经是 JSON 对象，无需再次解析
            console.log(response);

            // 遍历数据并显示
            for (var i = 0; i < response.length; i++) {
                var row = response[i];
                var name = row.name;
                var user_post = row.user_post;
                console.log(name, user_post);

                // 在 HTML 中显示数据 (示例)
                $("#posted").append("<p>" + name + ": " + user_post + "</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/xiazai/code/10475">
                            <img src="https://img.php.cn/upload/webcode/000/000/002/176225760867285.png" alt="杰易OA办公自动化系统6.0">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/xiazai/code/10475">杰易OA办公自动化系统6.0</a>
                            <p>基于Intranet/Internet 的Web下的办公自动化系统，采用了当今最先进的PHP技术，是综合大量用户的需求,经过充分的用户论证的基础上开发出来的，独特的即时信息、短信、电子邮件系统、完善的工作流、数据库安全备份等功能使得信息在企业内部传递效率极大提高，信息传递过程中耗费降到最低。办公人员得以从繁杂的日常办公事务处理中解放出来，参与更多的富于思考性和创造性的工作。系统力求突出体系结构简明</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="杰易OA办公自动化系统6.0">
                                <span>0</span>
                            </div>
                        </div>
                        <a href="/xiazai/code/10475" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="杰易OA办公自动化系统6.0">
                        </a>
                    </div>
                ");
            }
        },
        error: function(xhr, status, error) {
            console.error("AJAX request failed:", status, error);
            console.log("Response Text:", xhr.responseText); // 打印完整的响应文本
        }
    });
}

$(document).ready(function() {
    displayPosts();
});

<div class="user-post">
    Create post:<br>
    <form id="form" method="POST">
        <textarea id = "create_post" name="create_post" rows="10" cols = "50"></textarea>
        <input type="submit" class="post-button" value="PostButton">
    </form>
</div>
<div class="posts" id="posted">
    <div class="post">
        <h3 id="existing_posts">@@##@@Posts</h3>
        <div class="options">
            <a href="">Like</a>
            <a href="">Comment</a>
            <a href="" class="report">Report</a>
        </div>
    </div>
</div>