如何将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>';
?>