如何将 Ajax 请求的结果分配到多个 div 中？

Question

让我进一步解释我试图实现的目标。

我正在遍历我从中请求数据的 PHP 文件中的一个表。 对于该表中的每一行，我都会打印一个包含一些内容的 div。或者更具体地说是引导卡。 （见最底部的代码）

首先，我请求数据

<div id="result"></div>

<script>
function load_data()
{
    $.ajax({
        url:"_cards.php",
        method:"POST",
        success:function(data)
        {
            $('#result').html(data);
        }
    });
}

load_data()
</script>

这会将响应压缩到单个 div (id=result) 中。 但我正在寻找的是一种在自己的 div 中打印每张引导卡的方法。将每张卡片从左到右逐行排列。或者将卡片放在引导网格中也可以。我只是不知道如何拆分响应并将其动态分配到单独的 div 中。

这里是我请求数据的 PHP 文件：

<?php
include '../../_Database.php';
$db = Database::getInstance();

$result = mysqli_query($db->link, "SELECT * FROM `Workorder` WHERE isLocked = 0");
{
    $wo = $row['idWorkOrder'];
    $a  = $row['Article_idArticle'];
    $oQ = $row['orderQuantity'];
    $cQ = $row['currentQuantity'];

    echo '<div class="card" style="width: 100%; text-align: center;">';
    echo '  <div class="card-body">';
    echo '      <b>' . $wo . '</b></p>';
    echo '      <h5 class="card-title" style="zoom:0.8">' . $db->getArticleString($a) . '</h5>';
    echo '      <h6 class="card-subtitle mb-2 text-muted">'. $db->getFirstNameFromWorkorder($row['idWorkOrder']) . $db->getLastNameFromWorkorder($row['idWorkOrder']).'</h6>';
    echo        $cQ . ' / ' . $oQ ;
    echo '  </div>';
    echo '</div>';
}
?>

表格上的每次迭代都会打印出这样一张卡片。在我目前的设置中，它们被打印并堆叠在一起。我希望它们从左到右逐行打印，或类似的东西。 如何做到这一点？

Answer 1

它们堆叠的原因是它们不在任何行/列网格中。

您可以通过将循环括在 <div class="row"> 中并将每张卡片括在 <div class="col-md-3"> 中来解决此问题（例如，产生 4 列）

这样，您将看到所有卡片呈网格状，而不是堆叠在一起。

例子：

echo '<div class="row">';

while (mysqli_fetch_row()) { // looping over rows
    $wo = $row['idWorkOrder'];
    $a  = $row['Article_idArticle'];
    $oQ = $row['orderQuantity'];
    $cQ = $row['currentQuantity'];

    echo '<div class="col-md-3">';
    echo '  <div class="card" style="width: 100%; text-align: center;">';
    echo '    <div class="card-body">';
    echo '        <b>' . $wo . '</b></p>';
    echo '        <h5 class="card-title" style="zoom:0.8">' . $db->getArticleString($a) . '</h5>';
    echo '        <h6 class="card-subtitle mb-2 text-muted">'. $db->getFirstNameFromWorkorder($row['idWorkOrder']) . $db->getLastNameFromWorkorder($row['idWorkOrder']).'</h6>';
    echo          $cQ . ' / ' . $oQ ;
    echo '    </div>';
    echo '  </div>';
    echo '</div>';
}
echo '</div>';
?>