如何实现点击按钮时每次加载+3条数据库查询结果（如3-6-9）？

我来帮你搞定这个需求！首先得修正你原JS代码里的小语法错误（少了括号），然后添加计数逻辑来实现3-6-9的递增加载。下面分两种常用场景给你解决方案：

场景1：分页追加新数据（推荐，性能更优） #

这种方式是每次点击加载新的3条数据，追加到现有内容后面，不会重复加载已显示的数据，适合数据量较大的情况。

前端代码修改 #

<script type="text/javascript">
$(document).ready(function(){
    // 记录下一次查询的偏移量（已经加载了多少条）
    let offset = 0;
    const perPage = 3; // 每次固定加载3条
    
    // 修正原代码的语法错误：$"button" → $("button")
    $("button").click(function(){
        $.ajax({
            type: 'POST',
            url: 'script.php',
            // 把偏移量和每页条数传给后端
            data: { offset: offset, per_page: perPage },
            success: function(data) {
                // 如果后端返回空，说明没有更多数据了
                if(data.trim() === ''){
                    $("button").prop('disabled', true).text('没有更多数据');
                    return;
                }
                // 追加新数据到容器（原代码用text()会替换，改成append()实现累加）
                // 建议把<p>换成<div>作为容器，更符合语义
                $("#user-container").append(data);
                // 更新偏移量，下次从新的位置开始查询
                offset += perPage;
            }
        });
    });
});
</script>

<button type="button">加载更多</button>
<!-- 用来展示用户数据的容器 -->
<div id="user-container"></div>

后端script.php代码 #

这里用mysqli预处理语句防止SQL注入，一定要注意安全：

<?php
// 数据库连接信息，替换成你自己的
$dbHost = 'localhost';
$dbUser = '你的用户名';
$dbPass = '你的密码';
$dbName = '你的数据库名';

// 建立数据库连接
$conn = mysqli_connect($dbHost, $dbUser, $dbPass, $dbName);
if(!$conn) {
    die('数据库连接失败：' . mysqli_connect_error());
}

// 接收前端传递的参数，转成整数避免注入
$offset = isset($_POST['offset']) ? intval($_POST['offset']) : 0;
$perPage = isset($_POST['per_page']) ? intval($_POST['per_page']) : 3;

// 预处理SQL语句，LIMIT 偏移量, 条数
$sql = "SELECT * FROM t_users LIMIT ?, ?";
$stmt = mysqli_prepare($conn, $sql);
// 绑定参数，"ii"表示两个整数类型的参数
mysqli_stmt_bind_param($stmt, "ii", $offset, $perPage);
mysqli_stmt_execute($stmt);
$result = mysqli_stmt_get_result($stmt);

// 生成要返回的HTML片段，这里根据你的需求自定义用户信息的展示
while($row = mysqli_fetch_assoc($result)){
    echo "<div class='user-item' style='padding: 8px; border-bottom: 1px solid #eee;'>";
    echo "ID: {$row['id']} | 用户名: {$row['username']} | 邮箱: {$row['email']}";
    echo "</div>";
}

// 清理资源
mysqli_stmt_close($stmt);
mysqli_close($conn);
?>

场景2：每次加载累计总数的全部数据（适合小数据量） #

如果你希望每次点击后显示的是全部3、6、9条数据（比如第一次显示3条，第二次替换成全部6条），可以用下面的逻辑：

前端代码 #

<script type="text/javascript">
$(document).ready(function(){
    let currentLimit = 3; // 初始显示3条
    const step = 3; // 每次增加3条
    
    $("button").click(function(){
        $.ajax({
            type: 'POST',
            url: 'script.php',
            data: { limit: currentLimit },
            success: function(data) {
                if(data.trim() === ''){
                    $("button").prop('disabled', true).text('没有更多数据');
                    return;
                }
                // 替换成新的全部数据
                $("#user-container").html(data);
                // 更新下一次的查询条数
                currentLimit += step;
            }
        });
    });
});
</script>

后端script.php对应代码 #

<?php
// 数据库连接部分同上...

$limit = isset($_POST['limit']) ? intval($_POST['limit']) : 3;

$sql = "SELECT * FROM t_users LIMIT ?";
$stmt = mysqli_prepare($conn, $sql);
mysqli_stmt_bind_param($stmt, "i", $limit);
mysqli_stmt_execute($stmt);
$result = mysqli_stmt_get_result($stmt);

// 渲染数据部分同上...
?>

关键说明 #

• 原代码里的$"button"和$"p"是语法错误，必须写成$("button")和$("选择器")才能正确选中元素。
• 一定要用预处理语句处理SQL参数，避免SQL注入攻击，这是后端开发的基本安全规范。
• 如果你的前端需要接收JSON格式的数据而不是HTML，可以让后端返回JSON，然后前端用JS动态生成DOM元素，灵活性更高。

内容的提问来源于stack exchange，提问作者1.11111E+16