js点击按钮加载更多

基础概念

"点击按钮加载更多"是一种常见的网页交互设计，用于在用户点击按钮时动态加载更多内容，而不是一次性加载所有内容。这种设计可以提高页面加载速度，减少服务器压力，并提供更好的用户体验。

类型

无限滚动：当用户滚动到页面底部时自动加载更多内容。
分页按钮：用户点击“下一页”或“加载更多”按钮来获取新内容。

应用场景

新闻网站：展示最新文章，用户可以逐页浏览。
社交媒体平台：如微博、朋友圈，显示好友动态。
电商网站：商品列表，允许用户查看更多商品。
论坛和社区：帖子列表，用户可以加载更多讨论内容。

示例代码（JavaScript + AJAX）

以下是一个简单的示例，展示了如何使用JavaScript和AJAX实现点击按钮加载更多内容的功能：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Load More Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<div id="content">
    <!-- 初始内容 -->
    <p>Content 1</p>
    <p>Content 2</p>
</div>
<button id="loadMore">Load More</button>

<script>
$(document).ready(function(){
    var page = 1; // 当前页码
    var loading = false; // 是否正在加载

    $('#loadMore').click(function(){
        if (loading) return;
        loading = true;

        $.ajax({
            url: 'load_more.php', // 后端处理脚本
            type: 'GET',
            data: { page: page },
            success: function(response){
                $('#content').append(response);
                page++;
                loading = false;
            },
            error: function(){
                alert('Failed to load more content.');
                loading = false;
            }
        });
    });
});
</script>

</body>
</html>

后端示例（PHP）

假设load_more.php文件如下：

<?php
// 假设每页显示2条内容
$itemsPerPage = 2;
$page = isset($_GET['page']) ? intval($_GET['page']) : 1;

$start = ($page - 1) * $itemsPerPage;
$end = $start + $itemsPerPage;

// 模拟数据库中的数据
$data = [
    'Content 3', 'Content 4', 'Content 5', 'Content 6', 'Content 7'
];

for ($i = $start; $i < $end && $i < count($data); $i++) {
    echo "<p>" . htmlspecialchars($data[$i]) . "</p>";
}
?>