首页
后端开发
PHP
jQuery加载更多功能

jQuery加载更多功能

0 次浏览 0 条评论
zip
zip

加载更多的功能，放在评论区、列表页、社交动态里都挺常见的，毕竟一下子把所有内容全丢出来，不太现实。用 jQuery 搞定这个，代码不多，逻辑也清晰，适合想快速上手的你。

思路其实挺简单：监听滚动事件，判断用户是不是滑到底了，触发加载逻辑。常用的写法是拿 $(window).scrollTop() 跟 $(document).height() 比较下。可以设置个阈值，比如 100px，提前加载，用户体验也更顺滑。

数据求这块，一般用 AJAX 来搞定，用 $.ajax() 或 $.getJSON() 都行。求成功后，拿到数据遍历下，插到页面里就行。比如：

function loadMore() {
  $.ajax({
    url: '/api/load-more',
    type: 'GET',
    dataType: 'json',
    success: function(data) {
      data.forEach(item => {
        const newItem = $('
').html(item.content);
        $('#content-container').append(newItem);
      });
    },
    error: function() {
      alert('加载失败，稍后再试');
    }
  });
}

了，为了防止重复触发，建议加个 loading 状态 标志，比如求中禁掉按钮、显示个加载动画，体验会好不少。还可以配合分页参数，让后端按页返回，逻辑更清晰。

除了传统点击加载，滚动到底自动加载也是个思路，适合做那种“刷不停”的页面。你要是项目用的还不是框架，而是 jQuery 写的页面，这套方案算是又轻又稳了。

想参考具体实现，可以看看压缩包里的 more 文件，应该有完整代码或模板，照着改改就能直接用。