php+html调用数据库200条数据并且能在前段默认显示10条数据在点击加载更多的时候每次加载10条。当没有数据的时候加载更多字样就不显示

以下是一个使用PHP和HTML调用数据库的示例，实现了在前端默认显示10条数据，并且在点击"加载更多"按钮时每次加载10条数据。当没有数据可加载时，"加载更多"按钮的字样将不显示。

<?php
// 建立数据库连接
$servername = "localhost";
$username = "your_username";
$password = "your_password";
$dbname = "your_database";
$conn = new mysqli($servername, $username, $password, $dbname);

// 检查连接是否成功
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}

// 查询数据库的数据
$sql = "SELECT * FROM your_table LIMIT 10";
$result = $conn->query($sql);

// 将查询结果存入数组
$data = array();
if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
        $data[] = $row;
    }
}

// 关闭数据库连接
$conn->close();
?>

<!DOCTYPE html>
<html>
<head>
    <title>加载更多</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="data-container">
        <?php foreach ($data as $row): ?>
            <div><?php echo $row['column1']; ?></div>
            <div><?php echo $row['column2']; ?></div>
            <!-- 显示更多数据的其他字段 -->
        <?php endforeach; ?>
    </div>
    <button id="load-more">加载更多</button>

    <script>
        var offset = 10; // 初始偏移量为10
        var limit = 10; // 每次加载的数据条数为10

        // 加载更多数据
        $('#load-more').click(function() {
            $.ajax({
                url: 'load_more.php',
                type: 'POST',
                data: {offset: offset, limit: limit},
                success: function(response) {
                    // 将加载的数据添加到页面
                    $('#data-container').append(response);
                    offset += limit; // 更新偏移量
                    if (response.trim() === '') {
                        // 如果没有更多数据了，隐藏"加载更多"按钮
                        $('#load-more').hide();
                    }
                }
            });
        });
    </script>
</body>
</html>

在上面的示例中，假设数据库的表名为"your_table"，需要将"your_username"、"your_password"和"your_database"替换为实际的数据库用户名、密码和数据库名。

加载更多数据的逻辑在JavaScript中实现，它通过发送AJAX请求到一个名为"load_more.php"的文件来获取更多数据。在服务器端的"load_more.php"文件中，可以使用$_POST['offset']和$_POST['limit']来获取偏移量和每次加载的数据条数，然后进行查询并返回结果。在前端的JavaScript中，将返回的数据添加到页面上，并更新偏移量。如果没有更多数据可加载，就隐藏"加载更多"按钮

php+html调用数据库200条数据并且能在前段默认显示10条数据在点击加载更多的时候每次加载10条。当没有数据的时候加载更多字样就不显示