需要帮助将表数据从php脚本转换为javascript代码

Question

我对PHP非常非常新（今天早上开始），所以请原谅我的无知和缺乏常识。

我正在开发一个网站，该网站已经具备了获取表单数据并将其存储在MySQL数据库中的功能。我现在想要每次加载某个页面时从数据库中提取所述数据，并使用相同的方法将一些HTML div应用到我的页面中。本质上我有3个卡预定义在源代码，但我希望它添加更多的卡到页面，一旦它加载，只要有行在我的MySQL表。

这是我用来部分实现这一点的代码：php：

<?php
  $server = "localhost";
  $username = "root";
  $password = "";
  $dbname = "newnotes";

  $conn = new mysqli($server, $username, $password, $dbname);
  $sql = "SELECT * FROM newnotesdetails";
  $result = $conn->query($sql);
  if($result->num_rows > 0){
      while($row = $result->fetch_assoc()){
          $src = $row["src"];
          $alt = $row["alt"];
          $title = $row["title"];
          $text = $row["text"];
          $href = $row["href"];
      }
  }
  echo $src, $alt, $title, $text, $href;
?>

JavaScript：

<script type="text/javascript">
  function createNewNotes() {
    const src = "<?php echo $src; ?>";
    const alt = "<?php echo $alt; ?>";
    const title = "<?php echo $title; ?>";
    const text = "<?php echo $text; ?>";
    const href = "<?php echo $href; ?>";

    console.log(src + alt + title + text + href);

    const divelem = document.createElement("div");
    divelem.classList.add("col-12", "col-md-4");
    const cardelem = document.createElement("div");
    cardelem.classList.add("card", "shadow", "h-100");
    const area = document.querySelector(".notesblock");
    divelem.appendChild(cardelem);
    area.appendChild(divelem);

    cardelem.innerHTML =
      '<img src="' +
      src +
      '" alt="' +
      alt +
      '" class="card-img-top">' +
      '<div class="card-body">' +
      '<h4 class="card-title">' +
      title +
      "</h4>" +
      '<p class="card-text">' +
      text +
      "</p>" +
      '<a href="' +
      href +
      '" class="stretched-link"></a>' +
      "</div>";
  }
</script>

很明显，问题是PHP在javascript代码访问数据时已经完成了对表中最后一行的迭代，所以我只在任何给定时间为MySQL表中的最后一个元素添加了一张卡片。

我被卡住了，不知道如何迭代它，使所有行的数据成功地传输到js脚本。我非常感谢你的帮助

Answer 1

您应该在PHP中使用'echo'命令，因为这允许您在前端读取和显示数据库中的数据。下面是一个如何使用它的示例。

<?php
$txt1 = "//data in your database";
$txt2 = "//data in your database";

echo "Image1" . $txt1 . "<br>";
echo "Image2" . $txt2 . "<br>";

?>