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

前端之家收集整理的这篇文章主要介绍了基于jquery实现页面滚动到底自动加载数据的功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

功能

正文

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

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

sql;"> 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]

数据对象模型 我们根据数据表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中没有提供类似的函数,那么,我们可以发挥人的主观能动——自己实现一个吧,具体实现如下:

sql;"> 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(),具体实现如下:

<div class="jb51code">
<pre class="brush:xhtml;">
///


/// Get the user message.
///

/// <param name="groupNumber">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,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接口(跨源请求例子),具体实现如下:

<div class="jb51code">
<pre class="brush:js;">
$.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 + ' - ' + '

' +
this.Name + '

' + ' —?' + '<span class="page_message">' +
this.Comment + '');
});
$('.animation_image').hide();
options.groupNumber++;
options.loading = false;
}
},error: function(xmlHttpRequest,errorThrown) {
options.loading = true;
console.log(errorThrown.toString());
}
});
};

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

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

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

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

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

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

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

猜你在找的jQuery相关文章