看新浪微博，人人网都有这样的效果：滚动条滚动到最下面的时候，新的数据就被自动加载出来了，今天亲自尝试了一下这个效果的实现。

最开始在CSDN上写了一版，功能比较简单，今天又增加了一个小功能：翻页到指定页数后，自动停止。用户点击继续查看后，再继续滚动。看看实现吧：

更新核心滚动代码：

    $(window).scroll(function(){

        // 当滚动到最底部以上n像素时， 加载新内容

        if ($(document).height() - $(this).scrollTop() - $(this).height()<1) {

            if (!gDataGetAll) {

                getData(gCurrentPage, gLongitude, gLatitude);

            }

        }

    });

首先，准备一个分页的存储过程：

CREATE PROCEDURE proctest

@pagesize INT,

@pagenumber INT

AS 

SELECT  *

FROM    ( SELECT ROW_NUMBER()OVER (ORDER BY userid)AS ROWNUM,c_name,user_email FROM ehrusers WHERE c_name<>''

        ) AS products

WHERE   ROWNUM BETWEEN @pagesize*(@pagenumber-1)+1 and @pagesize*@pagenumber

EXEC dbo.proctest 20, 1

接着，写一个取数据的C#方法：

        //Test

        public static DataTable GetTable(int pagesize, int pagenum)

        {

            string sql = string.Format(@"EXEC dbo.proctest {0}, {1}", pagesize, pagenum);

            DataSet ds = SqlHelper.ExecuteDataset(ConnString.GetConString, CommandType.Text, sql);

            if (ds.Tables.Count > 0 && ds.Tables[0].Rows.Count > 0)

            {

                return ds.Tables[0];

            }

            else

            {

                return null;

            }

        }

Ajax请求数据的逻辑，调用刚才的方法，返回JSON：

protected void Page_Load(object sender, EventArgs e)

        {

            if (Request.QueryString["pagesize"] != null && Request.QueryString["pagenumber"] != null)

            {

                int pagesize = int.Parse(Request.QueryString["pagesize"].ToString());

                int pagenumber = int.Parse(Request.QueryString["pagenumber"].ToString());

                System.Data.DataTable dt = DB.GetTable(pagesize, pagenumber);

                string json = Tools.CreateJsonParameters(dt);

                Response.Write(json);

            }

        }

其中用到了一个aspx页面作为controller。

接下来，就是比较重要的页面和js代码了：

页面：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>滚动测试</title>

    <style>

        .mainDiv {

            width: 800px;

            border: solid 1px #f00;

            padding: 10px;

        }

        .item {

            width: 600px;

            height: 50px;

            border: solid 1px #00ff90;

            font-size: 12px;

            margin: 10px;

        }

        .title {

            font-size: 16px;

            line-height: 20px;

        }

        .content {

            line-height: 14px;

        }

    </style>

    <script src="Scripts/jquery-1.7.1.js"></script>

</head>

<body>

    <h1>滚动测试</h1>

    <div class="mainDiv">

        <!--<div class="item">

            <div class="title">title</div>

            <div class="content">content content content content content content content</div>

        </div>

        -->

    </div>

</body>

</html>

JS：

  <script type="text/javascript">

        var gPageSize = 10;

        var i = 1; //设置当前页数，全局变量

        $(function () {

            //根据页数读取数据

            function getData(pagenumber) {

                i++;//页码自动增加，保证下次调用时为新的一页。

                $.get("Ajax.aspx", { pagesize: gPageSize, pagenumber: pagenumber }, function (data) {

                    if (data.length > 0) {

                        var jsonObj = JSON.parse(data);

                        insertDiv(jsonObj.Head);

                    }

                });

            }

            //初始化加载第一页数据

            getData(1);

            //生成数据html，append到div中

            function insertDiv(json) {

                var $mainDiv = $(".mainDiv");

                var html = '';

                for (var i = 0; i < json.length; i++) {

                    html += '<div class="item">';

                    html += ' <div class="title">' + json[i].ROWNUM + '   ' + json[i].c_name + '</div>';

                    html += '<div class="content">' + json[i].user_email.replace('lightinthebox', 'sina') + '</div>';

                    html += '</div>';

                }

                $mainDiv.append(html);

            }

            //==============核心代码=============

            var winH = $(window).height(); //页面可视区域高度 

            var scrollHandler = function () {

                var pageH = $(document.body).height();

                var scrollT = $(window).scrollTop(); //滚动条top

                var aa = (pageH - winH - scrollT) / winH;

                if (aa < 0.02) {//0.02是个参数

                    if (i % 10 === 0) {//10页做一次停顿！

                        getData(i);

                        $(window).unbind('scroll');

                        $("#btn_NextPage").show();

                    } else {

                        getData(i);

                        $("#btn_NextPage").hide();

                    }

                }

            }

            //定义鼠标滚动事件

            $(window).scroll(scrollHandler);

            //==============核心代码=============

            //继续加载按钮事件

            $("#btn_NextPage").click(function () {

                getData(i);

                $(window).scroll(scrollHandler);

            });

        });

    </script>

最终效果：

滚动前：

滚动自动刷新，到第10页后自动停止，出现链接：

大功告成！

Ajax动态滚动加载数据的更多相关文章

  1. highcharts Ajax 动态请求加载数据

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  2. js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件，兼容各大主流浏览器 HTML特殊字符

    js中对arry数组的各种操作小结   最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...

  3. jquery ajax 滚动加载数据

    jquery php 滚动加载数据(文件包 rollingpage) 效果如下: 页面加载时候($function(){ 自动加载第一页数据 }) 设置: var winH = $(window).h ...

  4. ajax按楼层加载数据

    代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <tit ...

  5. vue2.0无限滚动加载数据插件

      做vue项目用到下拉滚动加载数据功能,由于选的UI库(element)没有这个组件,就用Vue-infinite-loading 这个插件代替,使用中遇到的一些问题及使用方法,总结作记录! 安装: ...

  6. 基于jquery鼠标或者移动端滚动加载数据

    基于jquery鼠标或者移动端滚动加载数据 var stop = true; // 防止重复请求数据 $(window).scroll(function () { totalheight = pars ...

  7. h5页面列表滚动加载数据

    h5列表滚动加载数据很常见,以下分享下今天做的案例: 前言 这个效果实现需要知道三个参数 1. scrollTop -- 滚动条距离顶部的高度 2. scrollHeight -- 当前页面的总高度( ...

  8. PHP+InfiniteScroll实现网页无限滚动加载数据实例

    PHP+InfiniteScroll实现网页无限滚动加载数据实例,实现原理:当滚动条到底离网页底部一定长度的时候,向后台发送页数并获取数据. 首先我们在页面上先放置10条数据,即第一页,每一项都是p标 ...

  9. Vue无限滚动加载数据

    Web项目经常会用到下拉滚动加载数据的功能,今天就来种草Vue-infinite-loading 这个插件,讲解一下使用方法! 第一步:安装 npm install vue-infinite-load ...

随机推荐

  1. 一些 Shell 脚本（持续更新）

    1. 启动日志分析 启动日志格式如下: 开机时间:2015/05/13 周三 16:45:17.79 关机时间:2015/05/13 周三 18:46:03.91 开机时间:2015/05/14 周四 ...

  2. android应用程序的安装方式与原理

    android应用程序的安装方式与原理 四种安装方式: 1.系统应用安装――开机时完成,没有安装界面 2.网络下载应用安装――通过market应用完成,没有安装界面 3.ADB工具安装――没有安装界面 ...

  3. winform - BackgroundWorker

    http://www.cnblogs.com/happy555/archive/2007/11/07/952315.html 在VS2005中添加了BackgroundWorker组件,该组件在多线程 ...

  4. hdu 1043 Eight 经典八数码问题

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1043 The 15-puzzle has been around for over 100 years ...

  5. bzoj 1041 圆上的整点 分类： Brush Mode 2014-11-11 20:15 80人阅读 评论(0) 收藏

    这里先只考虑x,y都大于0的情况 如果x^2+y^2=r^2,则(r-x)(r+x)=y*y 令d=gcd(r-x,r+x),r-x=d*u^2,r+x=d*v^2,显然有gcd(u,v)=1且u&l ...

  6. Poj 1029 分类： Translation Mode 2014-04-04 10:18 112人阅读 评论(0) 收藏

    False coin Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 16418   Accepted: 4583 Descr ...

  7. CSRF(跨站请求伪造)攻击方式

    一.CSRF是什么? CSRF(Cross-site request forgery),中文名称:跨站请求伪造,也被称为:one click attack/session riding,缩写为:CSR ...

  8. IE6下div遮盖select的最优解决方案

    a.本节精选html5/css频道里一款IE6下div遮盖select的最优解决方案 原理:利用iframe来遮挡select,再用div来遮挡iframe,就这么简单. 1)首先,建一个div层和i ...

  9. swfObject 使用说明

    1.Embed your SWF with JavaScript 使用方法  swfobject.embedSWF(swfUrl, id, width, height, version, expres ...

  10. POJ 1986 Distance Queries (最近公共祖先，tarjan)

    本题目输入格式同1984,这里的数据范围坑死我了!!!1984上的题目说边数m的范围40000,因为双向边,我开了80000+的大小,却RE.后来果断尝试下开了400000的大小,AC.题意:给出n个 ...