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

作者: 全球彩票官网下载  发布:2020-01-03

明日,大家常常使用的新浪、Wechat或此外使用都有异步加载功能,综上说述,就是我们在刷天涯论坛或微信时,移动到分界面包车型客车下边或低档后前后相继通过异步的格局开展加载数据,这种办法加速了数码的加载速度,由于它每一回只加载风姿浪漫部分数额,当大家有雅量的数额,但无法展现全部,这个时候大家得以思虑采用异步方式加载数据。

数码异步加载能够爆发在客户点击“查看越来越多”按键或滚动条滚动到窗口的平底时自动加载;在接下去的博文中,大家将介绍怎么样促成机关加载越来越多的功效。

图1 天涯论坛加载越来越多效果与利益

正文

生机勃勃经,在大家的数据库中贮存着客商的新闻数据,今后,大家须要通过Web Service情势开放API接口让客商端调用,当然我们也得以接受相仿管理程序让客商端调用。

数据表先是,我们在数据库中开创数量表T_Paginate,它包括多个字段ID、Name和Message,此中ID是自增值。

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

图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中未有提供相通的函数,那么,大家能够公布人的主观能动——本人实现壹个呢,具体落到实处如下:

Declare @Start AS INTDeclare @Offset AS INT;WITH Results_CTE AS ( SELECT ID, Name, Message, ROW_NUMBER AS RowNum FROM T_Paginate WITHSELECT * FROM Results_CTE WHERE RowNum BETWEEN @Start AND @Offset

地点大家定义了公用表表明式Results_CTE,它获取T_Paginate表中的数据同期依照ID值由小到大排序,然后依照该各个分配ROW_NUMBE凯雷德值,个中@Start和@Offset是要询问的数量范围。

接下去,让我们完成情势GetListMessages(卡塔尔(قطر‎,具体完毕如下:

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

下面,大家定义了GetListMessages(卡塔尔(قطر‎方法,为了轻巧起见,大家把数据库的操作直接写在Web Service上了请大家见谅,它经过调用公用表表明式Results_CTE来获得分页数据,最终,大家创造多少个JavaScriptSerializer对象种类化数据成JSON格式再次来到给客商端。

Javascript是因为,大家调用的是地面Web ServiceAPI,所以,大家发送同源伏乞调用API接口,具体落到实处如下:

$.getData = function { 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  { // We need to convert JSON string to object, then // iterate thru the JSON object array. $.each, function.append('

' + this.Id + ' - ' + '' + this.Name + '' + ' —?' + '' + this.Comment + '

'); }); $.hide(); options.groupNumber++; options.loading = false; } }, error: function(xmlHttpRequest, textStatus, errorThrown) { options.loading = true; console.log(errorThrown.toString;};

地点,我们定义了getData(卡塔尔(قطر‎方法,它通过利用jQuery.ajax(卡塔尔方法,发送同源诉求调用GetListMessages接口,当数码得到成功加载到result div中显示并且分页数量加意气风发。

这段时间,大家早就完成了getData(State of Qatar方法,每当顾客把滚动条拖到最底端时,就调用getData(卡塔尔方法获取数据,那么,大家需求把getData(卡塔尔国方法和滚动条事件进展绑定,具体落到实处如下:

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

地点,大家贯彻了jQuery的scroll事件,当滚动条滚动到最尾巴部分时,调用getData(卡塔尔方法拿到服务器中的数据。

CSS样式接下去,大家给程序加多CSS样式,具体定义如下:

@import url;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自动加载越来越多程序,每当滚动条到底层时,发送异步央求获取服务器中的数据。

咱俩因此一个德姆o程序,介绍了通过jQuery完结异步加载数据,当然这里也关系到数量的页面查询难点,这里我们运用了三个自定义的公用表表明式Results_CTE来拿到分页数据,然后,通过$.ajax(卡塔尔方法发送同源哀告调用Web ServiceAPI;当数码获得成功后,通过JSON格式重回数据,最终,大家把数量展现到页面个中。

以上便是本文的全部内容,希望对我们的上学抱有利于。

本文由全球彩票历史版本发布于全球彩票官网下载,转载请注明出处:基于jquery实现页面滚动到底自动加载数据的功能

关键词: