Question

我需要在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中完成所有操作。

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

Answer 1

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

如果您需要有关脚本的任何帮助，请告诉我，我很乐意为您提供帮助。祝好运！：）

编辑：

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

Answer 2

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

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

我不知道你想如何“分割”你的数据，但为了简单起见，我只是假设文本在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++;
            }
        });
    });
});

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

仅在需要加载更多数据时显示按钮

2 个答案: