使用PHP实现点击按钮单次追加1条数据库数据到页面的问题咨询

问题根因 #

你的现有代码每次触发POST请求后，$element 变量都会从0初始化，然后直接循环10次查询输出卡片，自然会一次性加载10张。同时HTTP是无状态协议，默认不会记录之前已经加载的卡片数量，每次提交页面全量刷新，也没法实现「追加」的效果。

解决方案1：纯PHP实现（页面刷新追加） #

借助session存储已经加载的卡片数量，每次点击按钮仅把计数+1，然后渲染所有已加载的卡片即可：

<?php
// 页面最开头开启session
session_start();
// 初始化已加载卡片计数，默认值为0
if (!isset($_SESSION['loaded_card_num'])) {
    $_SESSION['loaded_card_num'] = 0;
}
// 点击提交按钮时计数+1，最多到10停止
if (isset($_POST["btn-add"]) && $_SESSION['loaded_card_num'] < 10) {
    $_SESSION['loaded_card_num']++;
}

// 这里放你之前的pdo数据库连接逻辑
// $pdo = ......
?>

<!-- 渲染所有已加载的卡片 -->
<?php for ($i = 0; $i < $_SESSION['loaded_card_num']; $i++): ?>
    <?php
    // 推荐用预处理查询避免SQL注入风险
    $statement = $pdo->prepare("SELECT * FROM dorayaki ORDER BY stock DESC LIMIT ? ,1");
    $statement->execute([$i]);
    if ($row = $statement->fetch()):
        $doraId = $row["id"];
    ?>
    <div name ="card" class = "card">
        <p><?php echo "Name: <a name='doraprice' href='detail.php?id=$doraId'>".$row["name"]."</a>"; ?></p>
        <p><?php echo "Price: <a name='doraprice' href='detail.php?id=$doraId'>".$row["price"]."</a>"; ?></p>
        <p><?php echo "Description: <a name='doraprice' href='detail.php?id=$doraId'>".$row["desc"]."</a>"; ?></p>
    </div>
    <?php endif; ?>
<?php endfor; ?>

<!-- 提交表单，满10张时禁用按钮 -->
<form method="post">
    <input type="submit" name="btn-add" value="Add element" <?php echo $_SESSION['loaded_card_num'] >=10 ? 'disabled' : ''; ?>>
</form>

如果需要刷新页面清空已加载的卡片，只需要在session_start()后加一行判断：

if (empty($_POST)) {
    $_SESSION['loaded_card_num'] = 0;
}

解决方案2：AJAX实现（无刷新追加，体验更好） #

不需要页面刷新，点击按钮直接请求后端加载单张卡片插入页面即可：

前端页面代码 #

<!-- 卡片存放容器 -->
<div id="card-wrap"></div>
<form>
    <input type="button" id="add-btn" value="Add element">
</form>
<p id="full-tip" style="display:none;color:#999;">已加载完全部10张卡片</p>

<script>
let loadedCount = 0;
const addBtn = document.getElementById('add-btn');
const cardWrap = document.getElementById('card-wrap');
const fullTip = document.getElementById('full-tip');

addBtn.onclick = function() {
    if (loadedCount >= 10) {
        addBtn.disabled = true;
        fullTip.style.display = 'block';
        return;
    }
    // 发起请求拿单张卡片内容
    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'get_single_card.php?index=' + loadedCount);
    xhr.onload = function() {
        if (xhr.status === 200) {
            cardWrap.insertAdjacentHTML('beforeend', xhr.responseText);
            loadedCount++;
            if (loadedCount >= 10) {
                addBtn.disabled = true;
                fullTip.style.display = 'block';
            }
        }
    }
    xhr.send();
}
</script>

后端get_single_card.php代码 #

<?php
// 引入你的数据库连接逻辑
// $pdo = ......

$index = (int)$_GET['index'];
$statement = $pdo->prepare("SELECT * FROM dorayaki ORDER BY stock DESC LIMIT ? ,1");
$statement->execute([$index]);
if ($row = $statement->fetch()) {
    $doraId = $row["id"];
    echo <<<CARD
    <div name ="card" class = "card">
        <p>Name: <a name='doraprice' href='detail.php?id=$doraId'>{$row["name"]}</a></p>
        <p>Price: <a name='doraprice' href='detail.php?id=$doraId'>{$row["price"]}</a></p>
        <p>Description: <a name='doraprice' href='detail.php?id=$doraId'>{$row["desc"]}</a></p>
    </div>
CARD;
}
?>

内容的提问来源于stack exchange，提问作者TooGuilty