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

<?php
// 数据库连接信息 (请根据你的实际情况修改)
$host = "localhost";
$username = "your_username";
$password = "your_password";
$database = "your_database";

// 创建数据库连接
$connection = mysqli_connect($host, $username, $password, $database);

// 检查连接是否成功
if (!$connection) {
  die("Connection failed: " . mysqli_connect_error());
}

// 查询数据库
function retrieve_post($connection) {
  $sql = "SELECT * FROM tbl_user_posts";
  $result = mysqli_query($connection, $sql);

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

    // 将数据编码为 JSON 格式
    echo json_encode($data);
  } else {
    // 如果没有数据，返回一个空数组的 JSON
    echo json_encode([]);
  }
}

// 调用函数
retrieve_post($connection);

// 关闭数据库连接
mysqli_close($connection);
?>

function displayPosts() {
  $.ajax({
    type: "POST",
    url: "main_page.php", // 确保 URL 正确
    dataType: "json", // 明确指定返回的数据类型为 JSON
    success: function(response) {
      // 检查 response 是否为空或 undefined
      if (response && response.length > 0) {
        // response 已经是 JavaScript 对象，无需再次解析
        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/learn/2592">
                            <img src="https://img.php.cn/upload/webcode/000/000/000/5a2b9a0c4f1dd506.png" alt="初阶PHP Apache MySQL网站设计">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/xiazai/learn/2592">初阶PHP Apache MySQL网站设计</a>
                            <p>初阶PHP Apache MySQL网站设计来自作者多年学习、应用和讲授PHP的经验与体会，是专为学习PHP+MySQL数据库编程人员编与的入门教材。在最后二章设计了2个贴近实际应用的典型案例：留言本系统和论坛系统，每个案例先介绍开发思路、步骤，再给出全部源代码，使所学内容与实际应用紧密结合，特别是论坛系统将全书的案例串讲起来，力求使读者学到最贴近应用前沿的知识和技能。
</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="初阶PHP Apache MySQL网站设计">
                                <span>389</span>
                            </div>
                        </div>
                        <a href="/xiazai/learn/2592" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="初阶PHP Apache MySQL网站设计">
                        </a>
                    </div>
                ");
        }
      } else {
        console.log("No data received from PHP.");
        // 可以显示一个提示信息，例如 "暂无数据"
      }
    },
    error: function(xhr, status, error) {
      console.error("AJAX request failed:", status, error);
      console.error("Response Text:", xhr.responseText); // 打印完整的响应文本
      // 处理 AJAX 请求失败的情况，例如显示错误消息
    }
  });
}

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