基于jquery实现页面滚动到底自动加载数据的功能_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]

图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;}

图3 加载更多程序

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

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

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

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索jquery
自动加载
jquery 滚动条到底、jquery 滚动到底、jquery 滚动加载、jquery滚动加载数据、jquery weui 滚动加载,以便于您获取更多的相关知识。

时间: 2016-12-19

基于jquery实现页面滚动到底自动加载数据的功能_jquery的相关文章

jQuery实现页面滚动时动态加载内容的方法

 这篇文章主要介绍了jQuery实现页面滚动时动态加载内容的方法,实例分析了jQuery实现动态加载页面的技巧,非常具有实用价值,需要的朋友可以参考下     本文实例讲述了jQuery实现页面滚动时动态加载内容的方法.分享给大家供大家参考.具体分析如下: 很多网站,比如twitter,京东商城首页,会在页面滚动到一定的位置时才动态加载页面内容,这样可以加快页面打开的速度,也可以节约带宽,下面的JS代码就可以帮你做到. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

mui 页面跳转后加载数据,返回后的页面刷新,这是手机app

问题描述 mui 页面跳转后加载数据,返回后的页面刷新,这是手机app 我在A页面用mui中的openwindow 打开B页面,在B页面添加数据至后台,点返回按钮,回到A页面,我要这时在A页面自动刷新出B页面添加的数据..这个怎么操作..各位大神,急急急!!求赐教 解决方案 我这么说,你的A页面是当前页面,你的B页面是你后打开的页面,然后你的B页面的数据要返回给A页面用来展示.好,下面进入.... 如果你想在Activity中得到新打开Activity关闭后返回的数据,你需要使用Activity

android-当旋转Android屏幕时App自动加载数据

问题描述 当旋转Android屏幕时App自动加载数据 我打开我的应用时数据会自动加载,我的问题是:当屏幕是垂直的时候应用会从服务器上加载下数据,但当屏幕旋转的时候,它又重新加载数据,在垂直状态又重新加载,旋转也是,一直如此.我应该怎么做才能让它不重新加载数据,希望大家能帮我看看,应该如何处理. 程序代码如下: public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setCont

Android ListView滚动到底后自动加载数据_Android

熟悉Android的朋友们都知道,不管是微博客户端还是新闻客户端,都离不开列表组件,可以说列表组件是Android数据展现方面最重要的组件,我们 今天就要讲一讲列表组件ListView加载数据的相关内容.通常来说,一个应用在展现大量数据时,不会将全部的可用数据都呈现给用户,因为这不管对于服 务端还是客户端来说都是不小的压力,因此,很多应用都是采用分批次加载的形式来获取用户所需的数据.比如:微博客户端可能会在用户滑动至列表底端时自动加 载下一页数据,也可能在底部放置一个"加载更多"按钮,

jquery显示loading图片直到网页加载完成的方法_jquery

本文实例讲述了jquery显示loading图片直到网页加载完成的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html class="no-js"> <head> <meta charset='UTF-8'> <title>Simple Loader</title> <style> /* This only works with JavaScript, if it'

Android实现ListView分页自动加载数据的方法_Android

Android应用开发中,采用ListView组件来展示数据是很常用的功能,当一个应用要展现很多的数据时,一般情况下都不会把所有的数据一次就展示出来,而是通过分页的形式来展示数据,个人觉得这样会有更好的用户体验.因此,很多应用都是采用分批次加载的形式来获取用户所需的数据.例如:微博客户端可能会在用户滑动至列表底端时自动加载下一页数据,也可能在底部放置一个"查看更多"按钮,用户点击后,加载下一页数据. 下面通过一个Demo来展示ListView功能如何实现:该Demo通过在ListVie

如何在smarty中增加类似foreach的功能自动加载数据

在smarty中使用自定义插件来加载数据(见:编写Smarty插件在模板中直接加载数据的详细介绍),在使用的时候还是感觉不够方便,灵机一动就想写成类似foreach那种标签: 第一步:在Smarty_Compiler.class.php的_compile_tag函数中增加: 复制代码 代码如下: //加载数据的开始标签 case 'load': $this->_push_tag('load'); return $this->_complie_load_start($tag_args); bre

Android 下拉刷新框架实现、仿新浪微博、QQ好友动态滑到底部自动加载

苦苦找寻的2个版本,经过测试好用.再次感谢原作者! 1.第一个版本 Android 下拉刷新框架实现 http://blog.csdn.net/leehong2005/article/details/12567757 前段时间项目中用到了下拉刷新功能,之前在网上也找到过类似的demo,但这些demo的质量参差不齐,用户体验也不好,接口设计也不行.最张没办法,终于忍不了了,自己就写了一个下拉刷新的框架,这个框架是一个通用的框架,效果和设计感觉都还不错,现在分享给各位看官. 1. 关于下拉刷新 下拉

jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)_jquery

本文实例讲述了jQuery+ajax实现滚动到页面底部自动加载图文列表效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&qu

jquery滚动加载数据的方法

 这篇文章主要介绍了jquery滚动加载数据的方法,实例分析了jQuery动态加载数据的技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了jquery滚动加载数据的方法.分享给大家供大家参考.具体分析如下: 我们浏览有些网页的时候,当拉动浏览器的滚动条时到页底时,页面会继续自动加载更多内容供用户浏览.这种技术我暂且称它为滚屏加载技术,我们发现很多网站用到这种技术,例如新浪微博.QQ空间等. 代码如下: 代码如下: <!DOCTYPE=html> <html>