`

jQuery自动加载更多程序

 
阅读更多

 

 

1.1.1 摘要

现在,我们经常使用的微博、微信或其他应用都有异步加载功能,简而言之,就是我们在刷微博或微信时,移动到界面的顶端或低端后程序通过异步的方式进行加载数据,这种方式加快了数据的加载速度,由于它每次只加载一部分数据,当我们有大量的数据,但不能显示所有,这时我们可以考虑使用异步方式加载数据。

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

本文目录

image

图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]
LoadMore0

 

图2 数据表T_Paginate

数据对象模型

我们根据数据表T_Paginate定义数据对象模型Message,它包含三个字段分别是: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方法

现在,我们需要实现方法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(),具体实现如下:

/// <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()方法,为了简单起见,我们把数据库的操作直接写在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.
                $.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()方法,发送同源请求调用GetListMessages接口,当数据获取成功加载到result div中显示并且分页数量(groupNumber)加一。

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

// 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);
        }
    }
});

上面,我们实现了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;}

LoadMore1

图3 加载更多程序

上面,我们实现了jQuery自动加载更多程序,每当滚动条到底部时,发送异步请求获取服务器中的数据。

1.1.3 总结

我们通过一个Demo程序,介绍了通过jQuery实现异步加载数据,当然这里也涉及到数据的页面查询问题,这里我们使用了一个自定义的公用表表达式Results_CTE来获取分页数据,然后,通过$.ajax()方法发送同源请求调用Web Service API;当数据获取成功后,通过JSON格式返回数据,最后,我们把数据显示到页面当中。

[1]http://www.cnblogs.com/icebutterfly/archive/2009/08/05/1539657.html

[2]http://www.saaraan.com/2013/05/auto-load-records-on-page-scroll

Demo

分享到:
评论

相关推荐

    PHP+jquery自动加载更多

    在网页开发中,"PHP+jQuery自动加载更多"是一种常见的技术,用于提高用户体验,特别是当网站需要展示大量数据,如新闻、评论或社交媒体帖子时。这种方法允许用户在滚动页面时,无需手动点击“加载更多”按钮,而是...

    jQuery autocomplete 自动加载

    jQuery Autocomplete提供了很多可定制的选项,如`delay`(延迟触发自动补全的时间)、`appendTo`(指定补全列表插入到哪个元素中)、`sortFunction`(自定义排序规则)等。同时,还可以通过事件监听,如`open`、`...

    jquery文本框自动补全ajax autocomplete 完整实例

    在本文中,我们将深入探讨如何使用jQuery实现一个基于Ajax的文本框自动补全功能,以及相关的`autocomplete`插件...在实际项目中,你可能需要根据具体需求进行更多的定制,比如添加错误处理、优化性能或者增加更多选项。

    基于jQuery+ASP.NET技术实现的输入框提示自动完成功能程序代码

    在网页开发中,提高用户体验是至关重要的,而...这只是一个基础实现,实际应用中可能需要考虑更多细节,如异步加载数据、处理大量数据、支持多条件筛选、优化搜索性能等。不断优化和完善,才能为用户提供更优质的体验。

    javaScript和jQuery自动加载简单代码实现方法

    JavaScript 和 jQuery 是两种广泛用于网页动态效果和交互的编程语言,它们都能实现页面内容的自动加载功能。在本文中,我们将深入探讨如何使用这两种技术来实现在页面加载时执行特定的代码。 一、JavaScript 自动...

    ajax jquery 自动增加行

    在实际应用中,你可能还需要处理更多的细节,例如验证用户输入、防止重复添加、处理服务器返回的错误状态等。同时,为了提高用户体验,可以添加加载指示器和动画效果,使得用户明确感知到操作的进度。 以上就是使用...

    jQuery插件flexbox的应用程序

    描述中的重复信息暗示了jQuery插件flexbox在应用程序中的核心地位,可能意味着该插件对于处理响应式设计、动态内容加载或用户交互场景具有显著的优势。例如,当用户滚动页面、点击按钮或者窗口大小发生变化时,它...

    基于Jquery的简单自动补全

    **基于jQuery的简单自动补全**\n\n在网页开发中,自动补全功能是一种常见的交互设计,它能够提升用户体验,使用户在输入时能够快速找到并选择合适的词汇...不断学习和实践,掌握更多前端技术,将是提升自身技能的关键。

    jQuery购物车自动结算金额效果

    在本文中,我们将深入探讨如何使用jQuery实现购物车的自动结算功能,这是一项在电子商务网站中至关重要的功能。...通过不断学习和实践,你将能够掌握更多关于jQuery和前端开发的知识,从而构建更复杂的Web应用程序。

    jQuery实现文本框自动补全

    2. **自定义模板**:通过`item`选项可以自定义每个建议项的HTML结构,增加更多视觉效果。 3. **分组显示**:利用`group`属性可以将建议结果按组显示,提高用户浏览效率。 4. **多列显示**:使用第三方插件如`jquery-...

    Json Jquery 自动生成table的无刷新分页插件整合pagination

    在JavaScript中,反射主要通过内置的对象如`Object`、`Function`等实现,但在JSON和jQuery的分页插件中,反射的概念并不直接涉及,更多的是涉及到数据的解析和方法的调用。 在提供的压缩包文件中,`jquery-1.5.1.js...

    autocomplete--jquery自动填充

    对于大数据源,为了提高性能,可以采用分页或者懒加载的方式,只在用户滚动提示列表时加载更多数据。还可以利用缓存机制,对最近查询过的数据进行缓存,避免重复请求。 7. **兼容性与响应式设计** jQuery UI ...

    网页抓取之新方法 (在java程序中使用jQuery)

    在Java程序中使用jQuery进行网页抓取可以极大地提高效率,因为jQuery是一个强大的JavaScript库,它提供了丰富的DOM操作和事件处理功能,使得我们可以更方便地解析和操作HTML文档。 在Java中实现jQuery的集成,我们...

    30个jquery经典Demo

    26. **无限滚动(Infinite Scroll)**:监测滚动条位置,动态加载更多内容,提升用户体验。 27. **自定义事件(Custom Events)**:通过`.trigger()`和`.on()`创建并触发自定义事件,增加代码灵活性。 28. **DOM...

    html-jquery多语言选择下拉框

    -- 添加更多语言选项 --&gt; ``` 接下来,利用jQuery来监听下拉框的改变事件,并根据用户的选择加载相应的CSS文件。CSS文件通常包含了对应语言的文本内容。这里我们可以使用`$.getScript()`方法来动态加载CSS文件: ...

    jquery 教程 详细解释了jquery的使用方法

    1. 轻量级:jQuery库文件小巧,原始版本大约几十KB,经过压缩后通常不超过18KB,这使得它在网页加载时不会增加太多负担。 2. 强大选择器:jQuery提供了类似CSS的选择器,可以方便地选取和操作页面中的任何DOM元素。 ...

    移动端下拉刷新和上拉加载更多原生插件

    3. **上拉加载更多(Infinite Scroll)**:上拉加载更多是在用户滚动到底部时自动加载更多内容,提供无缝的数据浏览体验。可以使用Masonry、Infinite Scroll库或自定义JavaScript实现,监测滚动位置,当接近底部时,...

    jquery Masonry插件方砖布局图片与内容无限滚动加载

    结合 Infinite Scroll 插件,可以实现在用户滚动到底部时自动加载更多内容。首先,你需要在HTML中添加一个无限滚动的触发元素: ```html &lt;!-- 包含 Masonry 元素的内容 --&gt; &lt;div class="item"&gt;&lt;/div&gt; &lt;!-- 更多...

    jquery入门教程.pdf

    这些函数为开发者提供了更多的灵活性,使得jQuery能够更好地适应各种复杂的应用场景。 #### 十、jQueryUI:高级UI组件的宝库 **jQueryUI**是基于jQuery构建的一套用户界面库,提供了丰富的交互式组件,如拖放、...

    上拉 加载 刷新 页面

    上拉加载,又称无限滚动或滚动加载,是一种当用户滚动到页面底部时自动加载更多内容的设计模式。这种设计减少了页面跳转,使得用户可以连续浏览内容而无需手动点击分页。实现上拉加载的关键在于监听用户的滚动事件,...

Global site tag (gtag.js) - Google Analytics