如何通过ajax从数据库获取所有上传的数据？

Question

我有一个数据库，表名为“Outing”。除了 id 作为主要值之外，我有 3 列。它们是标题、地点和日期。现在，我有一个关于如何上传或添加该数据库信息的 html 文件，还有一个关于如何删除信息的文件，它完美地工作了。我现在唯一的问题是如何从数据库中检索所有信息并通过使用

<p>

标签将相应的类名发布到 html 文件上。

这是我的 HTML 文件。

index.html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="connectAjax.js"></script>
<div id="outingDetails"></div>

这是我的 JS 文件

connectAjax.js

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

    function getOutingDetails() {
      $.ajax({
        url: "outing_details.php", // Replace with your actual script path
        type: "GET",
        success: function(data) {
          $("#outingDetails").empty(); // Clear existing content
          for (var i = 0; i < data.length; i++) {
            var outing = data[i];
            $("#outingDetails").append(
              "<p class='Outing_Title'>" + outing.title + "</p>" +
              "<p class='Outing_Place'>" + outing.place + "</p>" +
              "<p class='Outing_Date'>" + outing.date + "</p>" +
              "<hr>" // Add a separator between outings
            );
          }
        },
        error: function(jqXHR, textStatus, errorThrown) {
          console.error("Error retrieving outing details:", textStatus, errorThrown);
          // Handle errors (optional: display an error message to the user)
        }
      });
    }

最后，这是我的 PHP 文件：

outing_details.php

<?php
// Connect to your database
$servername = "ignore_this";
$username = "ignore_this";
$password = "ignore_this";
$dbname = "ignore_this";

// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);

if (!$conn) {
  die("Connection failed: " . mysqli_connect_error());
}

// Write your query to fetch all outing data (excluding ID)
$sql = "SELECT title, place, date FROM Outing";

$result = mysqli_query($conn, $sql);

$outingData = array();
if (mysqli_num_rows($result) > 0) {
  while ($row = mysqli_fetch_assoc($result)) {
    $outingData[] = $row;
  }
}

mysqli_close($conn);

echo json_encode($outingData); // Encode data as JSON for sending to the browser

?>

解释

id 为 outingDetails 的父级

div

具有子级或

<p>

标签，标题列（来自数据库）的类名为“Outing_Title”，地点列为“Outing_Place”，日期列为“Outing_Date”。

我假设会发生什么？

我假设提取数据或检索数据后，它应该看起来像这样：

标题1 地点1 日期1

标题2 地点2 日期2

一些_标题 菲律宾马尼拉 2024 年 6 月 30 日

然后实际发生了

我的网站跳转到 example.com/outing_details.php，这是给出的数据：

[{"标题":"标题1","地点":"地点1","日期":"日期1"},{"标题":"标题2","地点":"地点2","日期":" Date2"}, {"title":"Some_Title","place":"菲律宾马尼拉","date":"2024 年 6 月 30 日"}].

这是我的问题

1. 为什么我用了ajax还是去/outing_details.php？

2. 那么为什么数据不像上面假设或解释的那样显示在 html body 上，例如 Title1、Place1、Date1 ... 等等。？

您能为我审核并修复吗？即使是 Gemini，Google 强大的 AI 也无法修复。

编辑和PS：我知道这个问题有相似之处，但这个问题有不同的关注点。

Answer 1

将 getOutingDetails() 函数替换为以下函数

function getOutingDetails() {
  $.ajax({
    url: "outing_details.php", // Replace with your actual script path
    type: "GET",
    dataType: "json",
    success: function(data) {
      $("#outingDetails").empty(); // Clear existing content
      for (var i = 0; i < data.length; i++) {
        var outing = data[i];
        $("#outingDetails").append(
          "<p class='Outing_Title'>" + outing.title + "</p>" +
          "<p class='Outing_Place'>" + outing.place + "</p>" +
          "<p class='Outing_Date'>" + outing.date + "</p>" +
          "<hr>" // Add a separator between outings
        );
      }
    },
    error: function(jqXHR, textStatus, errorThrown) {
      console.error("Error retrieving outing details:", textStatus, errorThrown);
      // Handle errors (optional: display an error message to the user)
    }
  });
}

这将解决显示未定义值的问题，但如果你想按行显示数据，那么你将不得不使用表格而不是 p 标签。