4

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

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

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

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

谁能教我如何使用jquery？

提前致谢。

4

3 回答 3

3

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

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

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

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

因此，单击按钮后，我们将 AJAX 请求提交到getMessages.php您将查看的位置，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" } ]
于 2010-01-16T11:15:04.840 回答
3

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

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

不幸的是，目前该项目仍处于 alpha 阶段，因此我无法在此处展示。您可以尝试并在此处发布您的代码，我会帮助您调整它。

于 2010-01-16T12:37:54.547 回答
0

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

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

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

于 2010-01-16T11:09:28.340 回答