首页 前端知识 jQuery自动加载更多程序

jQuery自动加载更多程序

2024-05-12 17:05:24 前端知识 前端哥 535 781 我要收藏

本文目录


  • 数据表

  • 数据对象模型

  • Web Service方法

  • Javascript

  • CSS样式

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图1 微博加载更多功能

1.1.2 正文

========

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

数据表


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

– =============================================

– Author: JKhuang

– Create date: 10/28/2013

– Description: A table stores the user information.

– =============================================

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

– =============================================

– Author: JKhuang

– Create date: 10/26/2013

– Description: Creates a pagination function

– =============================================

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

/**

* Sends same origin request with ajax and json.

* @param options

* The options need to send to server.

* For instance: url and groupNumber.

*/

$.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.

. e a c h ( .each( .each(.parseJSON(data.d), function() {

$(“#result”).append(‘

  • ’ +
  • this.Id + ’ - ’ + ‘’ +

    this.Name + ‘’ + ’ —?’ + ‘’ +

    this.Comment + ‘’);

    });

    $(‘.animation_image’).hide();

    bject, then

    // iterate thru the JSON object array.

    . e a c h ( .each( .each(.parseJSON(data.d), function() {

    $(“#result”).append(‘

  • ’ +
  • this.Id + ’ - ’ + ‘’ +

    this.Name + ‘’ + ’ —?’ + ‘’ +

    this.Comment + ‘’);

    });

    $(‘.animation_image’).hide();

转载请注明出处或者链接地址:https://www.qianduange.cn//article/8362.html
标签
评论
还可以输入200
共0条数据,当前/页
发布的文章

算法002——复写零

2025-03-02 13:03:05

github上传代码(自用)

2025-03-02 13:03:59

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!