业余电脑 > 网站技术 > 
 
jQuery自动加载更多程序
 
  来源:JK_Rush博客园 浏览次数:154 发布日期:2020-8-3

1.1.1 摘要

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

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

本文目录

  • 数据表

  • 数据对象模型

  • Web Service方法

  • Javascript

  • CSS样式

30211825-358aa63f8cce4e18b144a9c981773bd8.png

图1 微博加载更多功能

1.1.2 正文

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

数据表

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

-- =============================================
-- Author:        JKhuang
-- Create date:      10/28/2013
-- Description:    A table stores the user information.
-- =============================================
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]

30211826-c27d00d0893446589791a7ed5baab2f2.png

图2 数据表T_Paginate

数据对象模型

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

////// The message data object.
///[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中没有提供类似的函数,那么,我们可以发挥人的主观能动——自己实现一个吧,具体实现如下:

-- =============================================
-- Author:        JKhuang
-- Create date:      10/26/2013
-- Description:   Creates a pagination function
-- =============================================
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(),具体实现如下:

////// Get the user message.
//////the pagination number///the pagination data[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();
 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接口(跨源请求例子),具体实现如下:

/**
* Sends same origin request with ajax and json.
* @param options
* The options need to send to server.
* For instance: url and groupNumber.
*/
$.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('' +
  this.Id + ' - ' + '' +
  this.Name + '' + ' —?' + ''+
  this.Comment + '');
});
$('.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;}

30211829-ae087e2bd9e745b5a520e86323db6086.png

图3 加载更多程序

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

1.1.3 总结

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

  (本文作者:JK_Rush)
 
 
相关阅读
 jQuery实现在线文档
 jQuery实现放大镜效果
 JS代码中一个标点符号引起的问题…
 七步写出优秀的JS代码
 常用JS图片滚动(无缝、平滑、上…
 js实现Tab选项卡自动切换
 [ASP教程2-2]利用JSP的…
 
 
 
 
 
 
 
 
来自百度的相关阅读
 
关于我们    广告服务    邮箱登录    友情链接    
Copyright &copy 2002-2019 www.yydn.com,All Right reserved 版权所有   网站备案号:湘ICP备11011416号
湖南省长沙市高新区业余电脑工作室  管理群:94225851 站长QQ:293999
工作室邮箱:yydnyydn.com 工作室负责人:喻先生