如何使用ajax进行无限滚动?

时间:2017-10-16 07:09:48

标签: jquery ajax asp.net-ajax

我使用ASP.NET。

我想在我的页面上显示我的数据库帖子和评论。我可以用一个函数显示它们。但我想添加无限滚动属性。当用户滚动页面时,应重新加载页面并继续。你知道我喜欢Facebook,Twitter。

我该怎么做?这是我在页面上显示数据的代码。我在JQuery中搜索了scroll函数。但是我没有一起完成这个。

      $(function () {
        var posts = jQuery.parseJSON($("#MainContent_hdnPosts").val());
        $("#Post").html("");
        var html = "";
        $.each(posts, function (index, a) {
            html += '<tr><td>' + a.userId + '</td></tr>';

        });
        $("#Post").append(html);
    });

1 个答案:

答案 0 :(得分:1)

使用以下代码我已经给出了你在ASP.NET中做后端的PHP示例:

ON LOAD

 $(window).scroll(function () {
    if ($(window).scrollTop() + $(window).height() >= $(document).height()) {
        var last_id = $("#ticketHistoryData a:last-child").attr('id');
        loadMoreData(last_id);
    }
});
** 

功能加载更多数据

function loadMoreData(last_id) {
    $.ajax(
        {
            url: '../../controllers/support/fetch_hdata.php?last_id=' + last_id ,
            type: "get",
            beforeSend: function () {
                $('.ajax-load').show();
            }
        })
        .done(function (data) {
             $('.ajax-load').hide();
            $("#ticketHistoryData").append(data);
        })
        .fail(function (jqXHR, ajaxOptions, thrownError) {
            console.log('server not responding...');
        });
}

在控制器上,您会收到ID,并选择的数据大于当前收到的ID

select * from data where id < '" . $lastId . "' ORDER BY id DESC LIMIT 10;