注册 登录
  • 欢迎访问开心洋葱网站,在线教程,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入开心洋葱 QQ群
  • 为方便开心用户,开心洋葱官网已经开启复制功能!
  • 欢迎访问开心洋葱网站,手机也能访问哦~欢迎加入开心洋葱多维思维学习平台 QQ群
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏开心洋葱吧~~~~~~~~~~~~~!
  • 由于近期流量激增,小站的ECS没能经的起亲们的访问,本站依然没有盈利,如果各位看如果觉着文字不错,还请看官给小站打个赏~~~~~~~~~~~~~!

几行简单的下拉分页代码异步加载数据的代码

前端 开心洋葱 3745次浏览 已收录 0个评论 手机上查看
文章索引目录
[隐藏]

几行简单的下拉分页代码异步加载数据的代码

1.1/前端


 

2.2/ js或jquery代码

要先加载jquery代码,

添加实在代码

<script>// <![CDATA[
var load = true;
    $(function() {
        $(window).scroll(function () {
                //滚动条到顶部的垂直高度
                var scrollTop = $(this).scrollTop();
                //浏览器高度
                var windowHeight = $(this).height();
                //页面的文档高度
                var scrollHeight = $(document).height();

                if (((scrollTop + windowHeight) >= (scrollHeight - 200))) {
                    get_inte_data();
                }
        });
        get_inte_data();
    });

    function get_inte_data(){
        if(!load) {
            return;
        }
        load = false;
        //请求页
        var page = parseInt($("#data").data('page')) + 1;
        //总页数
        var total_page = parseInt($("#data").data('total-page'));
        if(total_page == 0) {
            $("#show_data p").text("没有相关数据!");
            return;
        }
        if(page > total_page) {
            $("#show_data p").text("已加载全部!");
            return;
        }
        var getUrl = "http://www.75271.com/product/getdata.php"+"?page="+page;
        $.get(getUrl, function(res){
            $("#data").append(res);
            $("#data").data('page', page);            
            load = true;
        });

    }
// ]]></script>

3.3/ 代码的后台处理

1.需定义每页显示的大小:$psize = 5;

2.后台需自己拼装js中的$("#data").append(res); res返回数据


开心洋葱 , 版权所有丨如未注明 , 均为原创丨未经授权请勿修改 , 转载请注明几行简单的下拉分页代码异步加载数据的代码
喜欢 (0)
[开心洋葱]
分享 (0)
关于作者:
开心洋葱,开心洋葱头,水墨

您必须 登录 才能发表评论!

……