jquery - 如何使用jquery显示更多列表

Question

我使用 PHP/MySQL 提取消息并显示。

现在我只想显示 10 个列表。

我想添加按钮。当我单击此按钮时，它会平滑地向下滑动并显示另外 10 条，总共 20 条消息。

如果我单击该按钮，它会再次向下滑动并显示总共 30 条消息。

有人可以教我如何用 jquery 做到这一点吗？

提前致谢。

Answer 1

原则上，您需要一个容器来放置所有新获取的消息。

<div id="messages">
    <! -- message 1 -->
    <! -- message 2 -->
    <div id="newMessages">
    </div>
</div>

然后您需要一个可以连接到 fetch-more-method 的按钮(或 anchor ，或其他任何东西):

<input type="button" value="Fetch more messages" id="btnFetchMessages" />

将连接放置在 DOMReady 内的某个位置:

var lastFetchedMessage = 0;

$('#btnFetchMessages').click(function() {
    $.ajax({
        url: '/getMessages.php',
        type: 'POST',
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        data: '{"lastId":'+lastFetchedMesasge+'"}',
        success: newMessagesReceived
});

因此，单击按钮后，我们会向 getMessages.php 提交 AJAX 请求，您将在其中查看 lastFetchedMessage 并返回大约 10 条下一条消息在此之上。从该页面，您返回 JSON包含消息的数组，以及您感兴趣的所有信息。

成功的 AJAX 请求后，将调用函数 newMessagesReceived:

function newMessagesReceived(result) {
    var container = $('#newMessages');

    for(var i = 0; i < result.length; i++) {
        var message = $('<div>' + result[i].body + '</div>');
        container.append(message);
    }

    var lastFetchedMessage = result[i].id;
}

上面假设您返回一个包含消息的数组，该数组至少具有属性 body 和 id:

[ { "body": "new message1", "id": "10" }, { "body": "new message2", "id": "11" } ]