4

我需要在 jQuery 和 PHP 中创建一个脚本，该脚本load more news仅在页面上尚未加载更多数据时才会显示一个按钮。最简单的解决方案是测试表是否已更新，但我不确定是否可以完成。另一种方法是测试表格中是否有当前不在页面上的内容，再次不确定如何执行此操作。

这就是我到目前为止所拥有的；

//check for more data every 5 seconds
window.setInterval(function() {
    $.get("phpscripts/getFeed.php", function(result) {
        //fade in #refreshFeed
        $("#refreshFeed").fadeIn(300);
    }); 
}, 5000);

//Get feed on click
$("#refreshFeed").live('click', function() {
    $.get("phpscripts/getFeed.php", function(result) {
        $("#newsFeed").html(result);
    }); 
});

这只是使按钮在 5 秒后显示，并且不会测试是否有更多数据要加载。第二个函数中的 php 脚本只是从表中加载数据。

我希望目前有一种方法可以在函数中使用相同的脚本并在 jQuery 中完成所有操作。

举个例子，如果有人曾经使用过 twitter 或 iPhone 的新 facebook 应用程序，那么这个概念是完全一样的。当数据库中有新信息时，会显示一个按钮，单击该按钮会将数据加载到提要的顶部。我确信 facebook 和 twitter 会使用 SSE，但我不需要这样做。我需要做的就是每 5 秒检查一次新数据。

4

2 回答 2

2

我刚刚完成了网站上的两个视图更多链接功能，我可以从我们所做的性能测试中告诉您，您最好的选择是加载所有数据并将其添加到页面加载到元素中的 DOM 中display: none。使用 jQuery 选择器获取所有这些元素并将集合存储在变量中。然后，您可以为这些元素编写更多/更少的视图脚本。

如果您在脚本方面需要任何帮助，请告诉我，我很乐意提供帮助。祝你好运！:)


编辑：

我想我可能错过了您的部分问题（如何知道何时隐藏或显示按钮）。您将需要保留一个变量，用于存储您吃了多少显示和切片以显示更多/更少。或者（但开销更大）您可以使用类作为标志来确定哪些元素是显示和不显示的。

于 2012-09-01T15:44:29.263 回答
1

首先，有几种方法可以实现这一点。您可以一次加载所有数据并使用 jQuery 操作要显示的内容。或者，您可以逐步从服务器获取更多数据，我将在下面给出如何做的建议（前者可能会提高性能）。此外，使用 jQuery 逐渐加载数据会对 SEO 产生影响。

正如我在对您的问题的评论中所写的那样，您可以使用 JSON 将数据从 PHP 返回到 jQuery，并包含一个变量来指示是否有更多数据要获取。然后可以检查此变量以查看您是否应该显示“阅读更多”链接。让我们先来看看服务器端的东西。

我不知道你想如何“拆分”你的数据，但为了简单起见，我只是假设文本在 500 个字符后被截断，然后再加载 500 个字符，依此类推。

const LOAD_PER_REQUEST = 500; // Load 500 characters per request

$text = 'Lorem ipsum...'; // Fetched from database
$requestNumber = (isset($_POST['requestNumber'])) ? ((int)$_POST['requestNumber']) : 0; // Use to calculate which data to return to jQuery

// Calculate & generate data to return to jQuery
$start = ($requestNumber * LOAD_PER_REQUEST);
$length = ($start - ($start + LOAD_PER_REQUEST));
$newText = substr($text, $start, $length);

$data = array(
    'text' => $newText,
    'hasMoreData' => (strlen($text) > ($start + LOAD_PER_REQUEST)) // If $text length is longer than where we cut off
);

echo json_encode($data);

现在在 jQuery 中，您可以通过执行以下操作来获取数据：

$(function() {
    var requestNumber = 1; // Assuming that initial data is placed on the page with PHP

    $('#refreshFeed').on('click', function(){
        // Get more data
        $.ajax({
            type: 'POST',
            url: 'phpscripts/getFeed.php',
            dataType: 'json',
            data: 'requestNumber=' + requestNumber,

            success: function(result) {
                if (result.hasMoreData) {
                    // There is more data; show "read more"
                    $('#refreshFeed').show();
                }

                else {
                    // No more data; hide "read more"
                    $('#refreshFeed').hide();
                }

                requestNumber++;
            }
        });
    });
});

我没有测试这段代码，但我希望你能明白我的想法。

于 2012-09-01T17:21:46.337 回答