基于jquery實現頁面滾動到底自動加載數據的功能_jquery

來源：懂視網責編：小采時間：2020-11-27 21:47:33

基于jquery實現頁面滾動到底自動加載數據的功能_jquery

基于jquery實現頁面滾動到底自動加載數據的功能_jquery:現在，我們經常使用的微博、微信或其他應用都有異步加載功能，簡而言之，就是我們在刷微博或微信時，移動到界面的頂端或低端后程序通過異步的方式進行加載數據，這種方式加快了數據的加載速度，由于它每次只加載一部分數據，當我們有大量的數據，但不能顯示所

推薦度：

點擊下載本文 文檔為doc格式

導讀基于jquery實現頁面滾動到底自動加載數據的功能_jquery:現在，我們經常使用的微博、微信或其他應用都有異步加載功能，簡而言之，就是我們在刷微博或微信時，移動到界面的頂端或低端后程序通過異步的方式進行加載數據，這種方式加快了數據的加載速度，由于它每次只加載一部分數據，當我們有大量的數據，但不能顯示所

現在，我們經常使用的微博、微信或其他應用都有異步加載功能，簡而言之，就是我們在刷微博或微信時，移動到界面的頂端或低端后程序通過異步的方式進行加載數據，這種方式加快了數據的加載速度，由于它每次只加載一部分數據，當我們有大量的數據，但不能顯示所有，這時我們可以考慮使用異步方式加載數據。

數據異步加載可以發生在用戶點擊“查看更多”按鈕或滾動條滾動到窗口的底部時自動加載；在接下來的博文中，我們將介紹如何實現自動加載更多的功能。

圖1 微博加載更多功能

正文

假設，在我們的數據庫中存放著用戶的消息數據，現在，我們需要通過Web Service形式開放API接口讓客戶端調用，當然我們也可以使用一般處理程序（ASHX文件）讓客戶端調用（具體請參考這里）。

數據表
首先，我們在數據庫中創建數據表T_Paginate，它包含三個字段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 數據表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 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接口（跨源請求例子），具體實現如下：

上面，我們定義了getData()方法，它通過使用jQuery.ajax()方法，發送同源請求調用GetListMessages接口，當數據獲取成功加載到result div中顯示并且分頁數量（groupNumber）加一。

現在，我們已經實現了getData()方法，每當用戶把滾動條拖到最底端時，就調用getData()方法獲取數據，那么，我們需要把getData()方法和滾動條事件進行綁定，具體實現如下：

上面，我們實現了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;}

圖3 加載更多程序

上面，我們實現了jQuery自動加載更多程序，每當滾動條到底部時，發送異步請求獲取服務器中的數據。

我們通過一個Demo程序，介紹了通過jQuery實現異步加載數據，當然這里也涉及到數據的頁面查詢問題，這里我們使用了一個自定義的公用表表達式Results_CTE來獲取分頁數據，然后，通過$.ajax()方法發送同源請求調用Web Service API；當數據獲取成功后，通過JSON格式返回數據，最后，我們把數據顯示到頁面當中。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

基于jquery實現頁面滾動到底自動加載數據的功能_jquery

推薦度：

點擊下載本文 文檔為doc格式

標簽：內容加載滾動

熱門焦點

基于jquery實現頁面滾動到底自動加載數據的功能_jquery

基于jquery實現頁面滾動到底自動加載數據的功能_jquery

基于jquery實現頁面滾動到底自動加載數據的功能_jquery

最新推薦

猜你喜歡

熱門推薦