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

现在我们经常使用的微博、微信或者其他应用都有异步加载功能。简而言之，当我们刷微博或微信时，程序会在移动到界面的顶端或低端后以异步方式加载数据。这种方式加快了数据的加载。因为它一次只加载一部分数据，所以当我们有很多数据但不能显示所有数据时，我们可以考虑以异步方式加载数据。

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

图1微博加载更多功能。

主体

假设用户的消息数据存储在我们的数据库中。现在，我们需要以网络服务的形式打开应用编程接口，供客户端调用。当然，我们也可以使用通用处理程序(ASHX文件)供客户端调用(详情请参考此处)。

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

创建表格[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，具体定义如下：

///摘要///消息数据对象。////摘要[Serializable]公共类Message { public int Id { get设置；}公共字符串名称{ get设置；}公共字符串Comment { get设置；}}Web Service方法现在，我们需要实现GetListMessages()方法，该方法根据客户端发送的页数获取相应的分页数据，并以JSON格式返回给客户端。在实现GetListMessages()方法之前，我们将首先介绍数据分页查询的方法。

在Mysql数据库中，我们可以使用limit函数实现数据分页查询，但是SQL Server中没有提供类似的功能，所以可以充分发挥人的主观能动性，自己实现一个。具体实现如下：

声明@开始为整数声明@偏移为整数；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其中ROW num介于@Start和@Offset之间以上，我们定义了常用的表表达式Results_CTE，它获取T _ Paginate表中的数据，根据ID值从小到大进行排序，然后根据顺序分配ROW _ NUMBER值，其中@ start和@ offset是要查询的数据范围。

接下来，让我们实现方法GetListMessages()，其实现如下：

///摘要///获取用户消息////summary////param name='组号'分页号/param/返回分页数据/返回[WebMethod][脚本方法(响应格式=响应格式.JSON)]公共字符串getlist messages(int GroupNumber){字符串查询=字符串.格式(“带有结果_CTE AS(选择标识、名称、消息、行号())”OVER(按标识排序)AS ROW num“”FROM T _ Paginate WITH(no lock))”“选择* FROM Results _ CTE，其中行数介于"{0}"和"{1}"之间；(组号- 1) *偏移量1,偏移量*组号);var messages=new listmessay()；使用(var con=新的SqlConnection(配置管理器.ConnectionStrings[' RadditConn '].ToString()))使用(var com=new SqlCommand(query，con)){ con . Open()；使用(var reader=com .ExecuteReader(CommandBehavior .CloseConnection(){ while(读取器read()){ var Message=new Message { Id=(int)读取器['标识']，名称=(字符串)读取器['名称']，注释=(字符串)读取器['消息']}；消息。添加（消息);} } //返回json数据。返回新的Java Script语言序列化程序()。序列化（消息);}}上面，我们定义了GetListMessages()方法，为了简单起见，我们把数据库的操作直接写在网络服务上了请大家见谅，它通过调用公用表表达式结果_CTE来获取分页数据，最后，我们创建一个Java Script语言序列化程序对象序列化数据成JSON格式返回给客户端。

爪哇岛描述语言由于，我们调用的是本地网络服务应用编程接口，所以，我们发送同源请求调用应用程序接口接口（跨源请求例子),具体实现如下：

$.getDATa=函数(选项){ var opts=$ .extend(true，{}，$.fn.loadMore.defaults，options)；$.ajax({ url: opts.url，type: 'POST '，内容类型： ' application/JSON；charset=utf-8 '，dataType: 'json '，data : ' {组号： ' opts。组号' } '，成功：函数(数据，textStatus，xhr) { if (data.d) { //我们需要将json字符串转换为对象，然后//迭代通过JSON对象数组。$.每个($。parseJSON(data.d)，function() { $('#result ').追加(' li id=' ')这个id ' '-' strong '这个。名称“/strong”—？" span class='page_message ' '这注释'/span/Li ')；});$('.动画_图像')。hide()；options . GroupNumberOptions . loading=false } }，error:函数(xmlHttpRequest，textStatus，错误抛出){ options。loading=true控制台。日志(ErrorToString。ToString())；} });};上面，我们定义了getData()方法，它通过使用jQuery.ajax()方法，发送同源请求调用GetListMessages接口，当数据获取成功加载到结果差异中显示并且分页数量（组号)加一。

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

//滚动事件。$(窗口)。滚动(函数(){ //在底部滚动时，调用了getData()函数if ($(窗口)。scrollTop() $(窗口)。高度()==$(文档)。高度()){ if(履带负载。组号=组总数！跟踪LoAd。loading){ track LoAd。loading=true//再次阻止其他加载数据。$('.动画_图像')。show()；$.getData(跟踪负载)；} }});上面，我们实现了jQuery的卷起事件，当滚动条滚动到最底部时，调用getData()方法获取服务器中的数据。

半铸钢钢性铸铁(铸造半钢)样式接下来，我们给程序添加半铸钢钢性铸铁(铸造半钢)样式，具体定义如下：

@ import URL(' reset . CSS ')；body，td，th { font-family : ' Microsoft Yahei '，Georgia，Times New Roman，Times，seriffont-size : 15px；}.animation _ image { background : # F9 fff；border: 1px实心# E1FFFFpadding: 10px宽度： 500 px；右边距：自动；左边距left: auto} #结果{ width: 500px右边距：自动；左边距left: auto} #结果ol { margin: 0pxpadding: 0px} #结果Li { margin-top : 20px；边框-top: 1px虚线# E1FFFFpadding-top : 20px；}

图3加载更多程序。

上面，我们意识到jQuery会自动加载更多的程序，并在滚动条到达底部时发送异步请求从服务器获取数据。

通过一个演示程序，我们介绍了如何通过jQuery异步加载数据。当然，这里也涉及到数据的页面查询。这里，我们使用一个用户定义的公共表表达式Results_CTE来获取分页数据，然后发送一个同源的请求来调用Web Service API通过美元。ajax()方法。成功获取数据后，以JSON格式返回数据。最后，我们在页面上显示数据。

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