基于jquery實(shí)現(xiàn)頁面滾動到底自動加載數(shù)據(jù)的功能
現(xiàn)在，我們經(jīng)常使用的微博、微信或其他應(yīng)用都有異步加載功能，簡而言之，就是我們在刷微博或微信時(shí)，移動到界面的頂端或低端后程序通過異步的方式進(jìn)行加載數(shù)據(jù)，這種方式加快了數(shù)據(jù)的加載速度，由于它每次只加載一部分?jǐn)?shù)據(jù)，當(dāng)我們有大量的數(shù)據(jù)，但不能顯示所有，這時(shí)我們可以考慮使用異步方式加載數(shù)據(jù)。
數(shù)據(jù)異步加載可以發(fā)生在用戶點(diǎn)擊“查看更多”按鈕或滾動條滾動到窗口的底部時(shí)自動加載；在接下來的博文中，我們將介紹如何實(shí)現(xiàn)自動加載更多的功能。
圖1 微博加載更多功能
正文
假設(shè)，在我們的數(shù)據(jù)庫中存放著用戶的消息數(shù)據(jù)，現(xiàn)在，我們需要通過Web Service形式開放API接口讓客戶端調(diào)用，當(dāng)然我們也可以使用一般處理程序（ASHX文件）讓客戶端調(diào)用（具體請參考這里）。
數(shù)據(jù)表
首先，我們在數(shù)據(jù)庫中創(chuàng)建數(shù)據(jù)表T_Paginate，它包含三個(gè)字段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 數(shù)據(jù)表T_Paginate
數(shù)據(jù)對象模型
我們根據(jù)數(shù)據(jù)表T_Paginate定義數(shù)據(jù)對象模型Message，它包含三個(gè)字段分別是：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方法
現(xiàn)在，我們需要實(shí)現(xiàn)方法GetListMessages()，它根據(jù)客戶端傳遞來的分頁數(shù)來獲取相應(yīng)的分頁數(shù)據(jù)并且通過JSON格式返回給客戶端，在實(shí)現(xiàn)GetListMessages()方法之前，我們先介紹數(shù)據(jù)分頁查詢的方法。
在Mysql數(shù)據(jù)庫中，我們可以使用limit函數(shù)實(shí)現(xiàn)數(shù)據(jù)分頁查詢，但在SQL Server中沒有提供類似的函數(shù)，那么，我們可以發(fā)揮人的主觀能動——自己實(shí)現(xiàn)一個(gè)吧，具體實(shí)現(xiàn)如下：
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
上面我們定義了公用表表達(dá)式Results_CTE，它獲取T_Paginate表中的數(shù)據(jù)并且根據(jù)ID值由小到大排序，然后根據(jù)該順序分配ROW_NUMBER值，其中@Start和@Offset是要查詢的數(shù)據(jù)范圍。
接下來，讓我們實(shí)現(xiàn)方法GetListMessages()，具體實(shí)現(xiàn)如下：
/// <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()方法，為了簡單起見，我們把數(shù)據(jù)庫的操作直接寫在Web Service上了請大家見諒，它通過調(diào)用公用表表達(dá)式Results_CTE來獲取分頁數(shù)據(jù)，最后，我們創(chuàng)建一個(gè)JavaScriptSerializer對象序列化數(shù)據(jù)成JSON格式返回給客戶端。
Javascript
由于，我們調(diào)用的是本地Web Service API，所以，我們發(fā)送同源請求調(diào)用API接口（跨源請求例子），具體實(shí)現(xiàn)如下：
$.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()方法，發(fā)送同源請求調(diào)用GetListMessages接口，當(dāng)數(shù)據(jù)獲取成功加載到result div中顯示并且分頁數(shù)量（groupNumber）加一。
現(xiàn)在，我們已經(jīng)實(shí)現(xiàn)了getData()方法，每當(dāng)用戶把滾動條拖到最底端時(shí)，就調(diào)用getData()方法獲取數(shù)據(jù)，那么，我們需要把getData()方法和滾動條事件進(jìn)行綁定，具體實(shí)現(xiàn)如下：
// 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);
}
}
});
上面，我們實(shí)現(xiàn)了jQuery的scroll事件，當(dāng)滾動條滾動到最底部時(shí)，調(diào)用getData()方法獲取服務(wù)器中的數(shù)據(jù)。
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 加載更多程序
上面，我們實(shí)現(xiàn)了jQuery自動加載更多程序，每當(dāng)滾動條到底部時(shí)，發(fā)送異步請求獲取服務(wù)器中的數(shù)據(jù)。
我們通過一個(gè)Demo程序，介紹了通過jQuery實(shí)現(xiàn)異步加載數(shù)據(jù)，當(dāng)然這里也涉及到數(shù)據(jù)的頁面查詢問題，這里我們使用了一個(gè)自定義的公用表表達(dá)式Results_CTE來獲取分頁數(shù)據(jù)，然后，通過$.ajax()方法發(fā)送同源請求調(diào)用Web Service API；當(dāng)數(shù)據(jù)獲取成功后，通過JSON格式返回?cái)?shù)據(jù)，最后，我們把數(shù)據(jù)顯示到頁面當(dāng)中。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助。
- jquery實(shí)現(xiàn)表格無縫滾動
- Jquery原生態(tài)實(shí)現(xiàn)表格header頭隨滾動條滾動而滾動
- asp.net+jquery滾動滾動條加載數(shù)據(jù)的下拉控件
- jquery滾動組件(vticker.js)實(shí)現(xiàn)頁面動態(tài)數(shù)據(jù)的滾動效果
- js/jquery控制頁面動態(tài)加載數(shù)據(jù) 滑動滾動條自動加載事件的方法
- jquery滾動加載數(shù)據(jù)的方法
- 使用jQuery或者原生js實(shí)現(xiàn)鼠標(biāo)滾動加載頁面新數(shù)據(jù)
- Jquery公告滾動+AJAX后臺得到數(shù)據(jù)
- 拉動滾動條加載數(shù)據(jù)的jquery代碼
- jQuery實(shí)現(xiàn)表格行數(shù)據(jù)滾動效果
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)上傳圖片功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
jquery實(shí)現(xiàn)圖片燈箱明暗的遮罩效果
這篇文章主要介紹了jquery實(shí)現(xiàn)圖片燈箱明暗的遮罩效果，有需要的朋友可以參考一下2013-11-11
jQuery實(shí)現(xiàn)內(nèi)容定時(shí)切換效果完整實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)內(nèi)容定時(shí)切換效果,以完整實(shí)例形式較為詳細(xì)的分析了jQuery結(jié)合時(shí)間函數(shù)針對內(nèi)容的定時(shí)切換顯示相關(guān)技巧,需要的朋友可以參考下2016-04-04
jquery中ajax函數(shù)執(zhí)行順序問題之如何設(shè)置同步
這篇文章主要介紹了jquery中ajax函數(shù)執(zhí)行順序問題之如何設(shè)置同步,需要的朋友可以參考下2014-02-02
jquery插件開發(fā)之實(shí)現(xiàn)md5插件
這篇文章主要介紹了jquery開發(fā)實(shí)現(xiàn)的md5插件，最后返回的是一串十進(jìn)制數(shù)，在jquery1.9.2下測試通過,需要的朋友可以參考下2014-03-03
Jquery uploadify 多余的Get請求(404錯(cuò)誤)的解決方法
下面小編就為大家?guī)硪黄狫query uploadify 多余的Get請求(404錯(cuò)誤)的解決方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-01-01
IE中jquery.form中ajax提交沒反應(yīng)解決方法分享
用jquery form插件，進(jìn)行ajax提交，本來可以用，好好地，突然發(fā)現(xiàn)，firefox，opera等可以提交，ie的success函數(shù)運(yùn)行了2012-09-09
jquery slibings選取同級其他元素的實(shí)現(xiàn)代碼
jquery選取同級其他元素可以使用slibings方法，end方法可以清除之前的鏈?zhǔn)讲僮鳎喈?dāng)于重新開始2013-11-11
jquery ajax結(jié)合thinkphp的getjson實(shí)現(xiàn)跨域的方法
這篇文章主要介紹了jquery ajax結(jié)合thinkphp的getjson實(shí)現(xiàn)跨域的方法,結(jié)合實(shí)例形式對比分析了jQuery ajax實(shí)現(xiàn)跨域的具體操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06
這篇文章主要介紹了jquery實(shí)現(xiàn)pager控件示例,需要的朋友可以參考下2014-04-04