Question

我拿出消息并用PHP / MySQL显示。

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

我想添加按钮。当我点击此按钮时，它会顺利滑下并显示另外10条消息。

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

有人能告诉我如何使用jquery吗？

提前致谢。

Answer 1

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

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

然后你想要一个可以连接到fetch-more方法的按钮（或锚点或其他）：

<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" } ]

Answer 2

在我的最新项目中，我使用jQuery tools scrollable在列表中显示20个最新项目（<ul><li>）。当列表滚动到最后一页时，我获取接下来的20个项目，然后使用build in jquery tools api将其附加到列表的末尾。这将持续到AJAX请求返回空结果，这表示数据库中没有更多列表。我有一个变量作为标志，然后我将其设置为false，因此当列表滚动到最后一页时没有触发AJAX请求。

您可能会看到它看起来像Twitter主页，但没有“更多”链接，因为列表会自动附加。

不幸的是，现在该项目仍处于alpha状态，因此我无法在此处显示。您可以尝试并在此处发布您的代码，我会帮您调整它。

Answer 3

使用javascript保存有关显示行数的状态信息等。

让按钮调用通过ajax返回数据的JS函数。 ajax调用的结果可以是HTML并注入div标记。 JS函数需要更新状态信息（每次增加行数等），并将该状态信息传递给ajax调用。

ajax调用的目标可以是一个PHP脚本，它执行MySQL查询并生成传回的HTML。

如何使用jquery显示更多列表

3 个答案: