基于jquery实现页面滚动到底自动加载数据的功能


Posted in Javascript onDecember 19, 2015

现在,我们经常使用的微博、微信或其他应用都有异步加载功能,简而言之,就是我们在刷微博或微信时,移动到界面的顶端或低端后程序通过异步的方式进行加载数据,这种方式加快了数据的加载速度,由于它每次只加载一部分数据,当我们有大量的数据,但不能显示所有,这时我们可以考虑使用异步方式加载数据。

数据异步加载可以发生在用户点击“查看更多”按钮或滚动条滚动到窗口的底部时自动加载;在接下来的博文中,我们将介绍如何实现自动加载更多的功能。

基于jquery实现页面滚动到底自动加载数据的功能

图1 微博加载更多功能

正文

假设,在我们的数据库中存放着用户的消息数据,现在,我们需要通过Web Service形式开放API接口让客户端调用,当然我们也可以使用一般处理程序(ASHX文件)让客户端调用(具体请参考这里)。

数据表
首先,我们在数据库中创建数据表T_Paginate,它包含三个字段ID、Name和Message,其中ID是自增值。

CREATE TABLE [dbo].[T_Paginate](
  [ID] [int] IDENTITY(1,1) NOT NULL,
  [Name] [varchar](60) COLLATE Chinese_PRC_CI_AS NULL,
  [Message] [text] COLLATE Chinese_PRC_CI_AS NULL,
 CONSTRAINT [PK_T_Paginate] PRIMARY KEY CLUSTERED 
(
  [ID] ASC
)WITH (IGNORE_DUP_KEY = OFF) ON [PRIMARY]
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]

基于jquery实现页面滚动到底自动加载数据的功能

图2 数据表T_Paginate

数据对象模型
我们根据数据表T_Paginate定义数据对象模型Message,它包含三个字段分别是:Id、Name和Comment,具体定义如下:

/// <summary>
/// The message data object.
/// </summary>
[Serializable]
public class Message
{
  public int Id { get; set; }
  public string Name { get; set; }
  public string Comment { get; set; }
}

Web Service方法
现在,我们需要实现方法GetListMessages(),它根据客户端传递来的分页数来获取相应的分页数据并且通过JSON格式返回给客户端,在实现GetListMessages()方法之前,我们先介绍数据分页查询的方法。

在Mysql数据库中,我们可以使用limit函数实现数据分页查询,但在SQL Server中没有提供类似的函数,那么,我们可以发挥人的主观能动——自己实现一个吧,具体实现如下:

Declare @Start AS INT
Declare @Offset AS INT
;WITH Results_CTE AS (
  SELECT ID, Name, Message, ROW_NUMBER() OVER (ORDER BY ID) AS RowNum 
FROM T_Paginate WITH(NOLOCK))
SELECT * FROM Results_CTE WHERE RowNum BETWEEN @Start AND @Offset

上面我们定义了公用表表达式Results_CTE,它获取T_Paginate表中的数据并且根据ID值由小到大排序,然后根据该顺序分配ROW_NUMBER值,其中@Start和@Offset是要查询的数据范围。

接下来,让我们实现方法GetListMessages(),具体实现如下:

/// <summary>
/// Get the user message.
/// </summary>
/// <param name="groupNumber">the pagination number</param>
/// <returns>the pagination data</returns>
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public string GetListMessages(int groupNumber)
{
  string query = string.Format("WITH Results_CTE AS (SELECT ID, Name, Message, ROW_NUMBER() OVER (ORDER BY ID) AS RowNum " +
                 "FROM T_Paginate WITH(NOLOCK)) " +
                 "SELECT * FROM Results_CTE WHERE RowNum BETWEEN '{0}' AND '{1}';",
(groupNumber - 1) * Offset + 1, Offset * groupNumber);
  var messages = new List<Message>();
  using (var con = new SqlConnection(ConfigurationManager.ConnectionStrings["RadditConn"].ToString()))
  using (var com = new SqlCommand(query, con))
  {
    con.Open();
    using (var reader = com.ExecuteReader(CommandBehavior.CloseConnection))
    {
      while (reader.Read())
      {
        var message = new Message
          {
            Id = (int)reader["ID"],
            Name = (string)reader["Name"],
            Comment = (string)reader["Message"]
          };
        messages.Add(message);
      }
    }

    // Returns json data.
    return new JavaScriptSerializer().Serialize(messages);
  }
}

上面,我们定义了GetListMessages()方法,为了简单起见,我们把数据库的操作直接写在Web Service上了请大家见谅,它通过调用公用表表达式Results_CTE来获取分页数据,最后,我们创建一个JavaScriptSerializer对象序列化数据成JSON格式返回给客户端。

Javascript
由于,我们调用的是本地Web Service API,所以,我们发送同源请求调用API接口(跨源请求例子),具体实现如下:

$.getData = function(options) {

  var opts = $.extend(true, {}, $.fn.loadMore.defaults, options);

  $.ajax({
    url: opts.url,
    type: "POST",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    data: "{groupNumber:" + opts.groupNumber + "}",
    success: function(data, textStatus, xhr) {
      if (data.d) {
        // We need to convert JSON string to object, then
        // iterate thru the JSON object array.
        $.each($.parseJSON(data.d), function() {
          $("#result").append('<li id="">' +
              this.Id + ' - ' + '<strong>' +
              this.Name + '</strong>' + ' —?' + '<span class="page_message">' +
              this.Comment + '</span></li>');
        });
        $('.animation_image').hide();
        options.groupNumber++;
        options.loading = false;
      }
    },
    error: function(xmlHttpRequest, textStatus, errorThrown) {
      options.loading = true;
      console.log(errorThrown.toString());
    }
  });
};

上面,我们定义了getData()方法,它通过使用jQuery.ajax()方法,发送同源请求调用GetListMessages接口,当数据获取成功加载到result div中显示并且分页数量(groupNumber)加一。

现在,我们已经实现了getData()方法,每当用户把滚动条拖到最底端时,就调用getData()方法获取数据,那么,我们需要把getData()方法和滚动条事件进行绑定,具体实现如下:

// The scroll event.
$(window).scroll(function() {
  // When scroll at bottom, invoked getData() function.
  if ($(window).scrollTop() + $(window).height() == $(document).height()) {
    if (trackLoad.groupNumber <= totalGroups && !trackLoad.loading) {
      trackLoad.loading = true;   // Blocks other loading data again.
      $('.animation_image').show();
      $.getData(trackLoad);
    }
  }
});

上面,我们实现了jQuery的scroll事件,当滚动条滚动到最底部时,调用getData()方法获取服务器中的数据。

CSS样式
接下来,我们给程序添加CSS样式,具体定义如下:

@import url("reset.css");
body,td,th {font-family: 'Microsoft Yahei', Georgia, Times New Roman, Times, serif;font-size: 15px;}
.animation_image {background: #F9FFFF;border: 1px solid #E1FFFF;padding: 10px;width: 500px;margin-right: auto;margin-left: auto;}
#result{width: 500px;margin-right: auto;margin-left: auto;}
#result ol{margin: 0px;padding: 0px;}
#result li{margin-top: 20px;border-top: 1px dotted #E1FFFF;padding-top: 20px;}

基于jquery实现页面滚动到底自动加载数据的功能

图3 加载更多程序

上面,我们实现了jQuery自动加载更多程序,每当滚动条到底部时,发送异步请求获取服务器中的数据。

我们通过一个Demo程序,介绍了通过jQuery实现异步加载数据,当然这里也涉及到数据的页面查询问题,这里我们使用了一个自定义的公用表表达式Results_CTE来获取分页数据,然后,通过$.ajax()方法发送同源请求调用Web Service API;当数据获取成功后,通过JSON格式返回数据,最后,我们把数据显示到页面当中。

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
键盘 keycode的值 javascript时触发事件时很有用的要素
Nov 02 Javascript
JavaScript QueryString解析类代码
Jan 17 Javascript
解析jquery获取父窗口的元素
Jun 26 Javascript
通过遮罩层实现浮层DIV登录的js代码
Feb 07 Javascript
Node.js的特点详解
Feb 03 Javascript
js 数字、字符串、布尔值的转换方法(必看)
Apr 07 Javascript
详解Angular 4.x Injector
May 04 Javascript
加载 vue 远程代码的组件实例详解
Nov 20 Javascript
详解vue静态资源打包中的坑与解决方案
Feb 05 Javascript
jquery.pager.js分页实现详解
Jul 29 jQuery
Node配合WebSocket做多文件下载以及进度回传
Nov 07 Javascript
基于vue+echarts 数据可视化大屏展示的方法示例
Mar 09 Javascript
js点击按钮实现带遮罩层的弹出视频效果
Dec 19 #Javascript
js获取本机操作系统类型的两种方法
Dec 19 #Javascript
javascript精确统计网站访问量实例代码
Dec 19 #Javascript
js实现图片轮播效果
Dec 19 #Javascript
js实现图片上传并正常显示
Dec 19 #Javascript
thinkphp实现无限分类(使用递归)
Dec 19 #Javascript
15个常用的jquery代码片段
Dec 19 #Javascript
You might like
星际原理概述
2020/03/04 星际争霸
解析php通过cookies获取远程网页的指定代码
2013/06/25 PHP
Yii2选项卡的简单使用
2017/05/26 PHP
PHP API接口必备之输出json格式数据示例代码
2017/06/27 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
2017/09/22 PHP
jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
2011/01/19 Javascript
jQuery编辑器KindEditor4.1.4代码高亮显示设置教程
2013/03/01 Javascript
JavaScript中的对象序列化介绍
2014/12/30 Javascript
js实现跨域的方法实例详解
2015/06/24 Javascript
jquery简单实现带渐显效果的选项卡菜单代码
2015/09/01 Javascript
vue.js中$set与数组更新方法
2018/03/08 Javascript
node实现生成带参数的小程序二维码并保存到本地功能示例
2018/12/05 Javascript
vue-cli 3.x配置跨域代理的实现方法
2019/04/12 Javascript
vue实现PC端录音功能的实例代码
2019/06/05 Javascript
JS获取表格视图所选行号的ids过程解析
2020/02/21 Javascript
各个系统下的Python解释器相关安装方法
2015/10/12 Python
Python2.7基于笛卡尔积算法实现N个数组的排列组合运算示例
2017/11/23 Python
python3模块smtplib实现发送邮件功能
2018/05/22 Python
django manage.py扩展自定义命令方法
2018/05/27 Python
Python数据可视化 pyecharts实现各种统计图表过程详解
2019/08/15 Python
python lambda函数及三个常用的高阶函数
2020/02/05 Python
简单了解python shutil模块原理及使用方法
2020/04/28 Python
详解如何修改python中字典的键和值
2020/09/29 Python
Html5 实现微信分享及自定义内容的流程
2019/08/20 HTML / CSS
Html5移动端网页端适配(js+rem)
2021/02/03 HTML / CSS
微软台湾官方网站:Microsoft台湾
2018/08/15 全球购物
美国婴儿用品及配件购买网站:Munchkin
2019/04/03 全球购物
物业管理求职自荐信
2013/09/25 职场文书
小学校长竞聘演讲稿
2014/05/16 职场文书
2014年国庆节演讲稿精选范文1500字
2014/09/25 职场文书
十佳少年事迹材料
2014/12/25 职场文书
毕业生爱心捐书倡议书
2015/04/27 职场文书
党支部季度考核意见
2015/06/02 职场文书
小学班主任教育随笔
2015/08/15 职场文书
班干部竞选演讲稿(精选5篇)
2019/09/24 职场文书
MySQL的安装与配置详细教程
2021/06/26 MySQL