Javascript 使用数据库中的数据填充空网格列

在我的主页上是一个空网格，每行有3列：

在另一个页面上，用户可以填写特定信息，以便这些方框中填写所述信息（这些方框代表学生/学校的项目）。我已经设法将数据发送到数据库。但现在我有点卡住了，因为我应该如何用数据库中的数据填充这些空方块

用于向数据库发送数据的PHP

网格布局

这个正方形最终会是这样的：

为此，我希望尽可能多地使用vanilla JS

编辑 如何从数据库检索我的数据：

数据应该放在哪里，但是对于每个新的数据输入，应该在网格中有一个新的框：

<div class="grid-container">
    <?php foreach($result as $key=>$value): ?>
        <div class="box"> <?= $key; ?> </div>
    <?php endforeach; ?>
</div>

它在网站上的显示方式它只显示左上角的数据，而不显示在网格中

---

您必须从数据库中查询数据，例如w3schools：

$sql=“从MyGuests中选择id、firstname、lastname”；
$result=$conn->query（$sql）；
如果（$result->num_rows>0）{
//每行的输出数据
而（$row=$result->fetch_assoc（））{
echo“id:.$row[“id”]。-Name:.$row[“firstname”]。$row[“lastname”]。
”；
}
}否则{
回显“0结果”；
}

然后，您可以将其插入HTML中，并使用for each根据您拥有的数据进行填充，在您的代码中，它将如下所示：

---

根据您使用的代码，您希望将数据获取/处理修改为：

include('../general.config.php');

$sql = "SELECT `type`, `short_summary`, `title` FROM `project`";
$result = $db->query($sql);
$data = []; // data array
if ($result->rowCount() > 0) {
    // output data of each row
    while($row = $result->fetch(PDO::FETCH_ASSOC)) {
        $data[] = $row;
    }
} else {
    echo "0 results";
}

如您所见，我们已经创建了一个新的

$data

数组来保存稍后的结果。当我们循环mysql查询中的行时，我们通过

$data[]=$row将它们添加到
$data
数组中

现在进行打印/回音

<div class="grid-container">
    <?php foreach($data as $key => $value): ?>
        <div class="box"> <?= $key; ?> </div>
    <?php endforeach; ?>
</div>



注意：循环时，所有信息将保存在
$value
变量中。要查看您可以访问哪些数据，您只需打印（$value）

，然后将其作为一个数组使用即可。即，

echo$value['title']

您将通过

选择

Mysql查询从数据库中获取数据，然后循环任何结果以有效打印框。@Darren因此，首先在新的php中，我必须获取数据，然后在另一个js文件中，我可以循环这个文件，并将其数据设置为空网格框？嗯，不确定html中的php如何工作html在php文件中，然后您可以使用opening“”标记指示您将插入php代码。抱歉，现在有一个正确获取数据的php文件。但是现在呢？在同一个PHP文件中应该是HTML吗？然后根据你说的，它应该填充我的网格？我会的！但是数据没有填充网格？或者我需要设置键和值吗？对不起，在后端方面是全新的。对不起，我以为问题已经解决了$数组将是从数据库返回的值的列表，然后您将获得键和值，例如：$key=id，$value=1。因此，只要用从数据库返回的列表替换$array，您就应该很好了！

<div class="grid-container">
    <?php foreach($result as $key=>$value): ?>
        <div class="box"> <?= $key; ?> </div>
    <?php endforeach; ?>
</div>

include('../general.config.php');

$sql = "SELECT `type`, `short_summary`, `title` FROM `project`";
$result = $db->query($sql);
$data = []; // data array
if ($result->rowCount() > 0) {
    // output data of each row
    while($row = $result->fetch(PDO::FETCH_ASSOC)) {
        $data[] = $row;
    }
} else {
    echo "0 results";
}

<div class="grid-container">
    <?php foreach($data as $key => $value): ?>
        <div class="box"> <?= $key; ?> </div>
    <?php endforeach; ?>
</div>