Question

我目前正在制作一个网站。基本上当用户滚动到屏幕的底部时，我将下载另外10个帖子（我正在制作一个小社交网络）。为此，我已经下载了JQuery。当用户滚动到页面底部时，将运行以下JavaScript：

page++;
var next = 'posts?page=' + page;
$('.pContainer').append("code that loads the servlet in the next var goes here");

在post servlet中我有几个out.println语句来测试它。我尝试过使用JSP：在附加括号中包含标签，但它不起作用。

Answer 1

您是否尝试过使用ajax？

page++;
var next = 'posts?page=' + page;
$.get(next, function (data) {
    $('.pContainer').append(data);
});

这会请求页面并附加从页面返回的数据。

文档：http://api.jquery.com/jQuery.get/

Answer 2

你应该使用一个插件;只是搜索'jQuery lazy load'。

你总能建立自己的，但不值得麻烦。我认为它背后的概念是计算底部元素的位置，比如＃bottom-bar，如果它高于某个阈值，比如低于页面底部200px，你可以在它上面加载元素直到它被进一步推下去。

滚动将成为加载更多项目的触发器。

其他详细信息：（未经测试）

$(window).scroll(function (){
    if ($(this).scrollTop() + 500 > $('#bottom-bar').offsest().top) {
        var newcontent = $('<div class="content"></div>');
        newcontent.load('http://source.of.data.com', function(data) {
            $('#bottom-bar').before(newcontent);
        });
    }
});

如何使用JQuery附加servlet的输出

2 个答案: