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

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

1/前端

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/ 代码的后台处理

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

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