php - 无限滚动 MySQL 数据

Question

我已关注此主题中的帮助:Using infinite scroll w/ a MySQL Database

并且已经接近于使其正常工作。我有一个使用 jquery masonry 在 block 中显示的页面，其中 block 由来自 mysql 数据库的数据填充。当我滚动到页面末尾时，我成功地获得了 loading.gif 图像，但在图像之后它立即显示 “没有更多的帖子要显示。” 如果这是真的，它应该说的是什么。我最初只调用了大约 10-15 个帖子中的 5 个帖子，所以当我到达页面底部时，其余的帖子应该会加载，但我收到的消息应该是在没有更多帖子时出现的帖子。

这是我的javascript:

var loading = false;
    $(window).scroll(function(){
        if($(window).scrollTop() == $(document).height() - $(window).height()) {   
            var h = $('.blockContainer').height();
            var st = $(window).scrollTop();
            var trigger = h - 250;

              if((st >= 0.2*h) && (!loading) && (h > 500)){
                loading = true;
                $('div#ajaxLoader').html('<img src="images/loading.gif" name="HireStarts Loading" title="HireStarts Loading" />');
                $('div#ajaxLoader').show();
                $.ajax({
                    url: "blocks.php?lastid=" + $(".masonryBlock:last").attr("id"),
                    success: function(html){
                        if(html){
                            $(".blockContainer").append(html);
                            $('div#ajaxLoader').hide();
                        }else{
                            $('div#ajaxLoader').html('<center><b>No more posts to show.</b></center>');
                        }
                    }
                });
            }
        }
    });

这是 block 实际所在页面上的 php。此页面最初发布数据库中的 5 个项目。 javascript 获取最后发布的 id 并通过 ajax 将其发送到 blocks.php 脚本，然后该脚本使用最后发布的 id 从数据库中获取其余项目。

$allPosts = $link->query("/*qc=on*/SELECT * FROM all_posts ORDER BY post_id DESC LIMIT 5");
        while($allRows = mysqli_fetch_assoc($allPosts)) {
            $postID = $link->real_escape_string(intval($allRows['post_id']));
            $isBlog = $link->real_escape_string(intval($allRows['blog']));
            $isJob = $link->real_escape_string(intval($allRows['job']));
            $isVid = $link->real_escape_string(intval($allRows['video']));
            $itemID = $link->real_escape_string(intval($allRows['item_id']));

            if($isBlog === '1') {
                $query = "SELECT * FROM blogs WHERE blog_id = '".$itemID."' ORDER BY blog_id DESC";
                $result = $link->query($query);
                while($blogRow = mysqli_fetch_assoc($result)) {
                    $blogID = $link->real_escape_string($blogRow['blog_id']);
                    $blogTitle = $link->real_escape_string(html_entity_decode($blogRow['blog_title']));
                    $blogDate = $blogRow['pub_date'];
                    $blogPhoto = $link->real_escape_string($blogRow['image']);
                    $blogAuthor = $link->real_escape_string($blowRow['author']);
                    $blogContent = $link->real_escape_string($blogRow['content']);  

                    //clean up the text
                    $blogTitle = stripslashes($blogTitle);
                    $blogContent = html_entity_decode(stripslashes(truncate($blogContent, 150)));           

                    echo "<div class='masonryBlock' id='".$postID."'>";
                    echo "<a href='post.php?id=".$blogID."'>";
                    echo "<div class='imgholder'><img src='uploads/blogs/photos/".$blogPhoto."'></div>";
                    echo "<strong>".$blogTitle."</strong>";
                    echo "<p>".$blogContent."</p>";
                    echo "</a>";
                    echo "</div>";

                }
            }

这是 AJAX 调用的 blocks.php 脚本中的 php:

//if there is a query in the URL
if(isset($_GET['lastid'])) {

//get the starting ID from the URL
$startID = $link->real_escape_string(intval($_GET['lastid']));
//make the query, querying 25 fields per run
$result = $link->query("SELECT  * FROM all_posts ORDER BY post_id DESC LIMIT '".$startID."', 25");

$html = '';
//put the table rows into variables
while($allRows = mysqli_fetch_assoc($result)) {
    $postID = $link->real_escape_string(intval($allRows['post_id']));
    $isBlog = $link->real_escape_string(intval($allRows['blog']));
    $isJob = $link->real_escape_string(intval($allRows['job']));
    $isVid = $link->real_escape_string(intval($allRows['video']));
    $itemID = $link->real_escape_string(intval($allRows['item_id']));

    //if the entry is a blog
    if($isBlog === '1') {
        $query = "SELECT * FROM blogs WHERE blog_id = '".$itemID."' ORDER BY blog_id DESC";
        $result = $link->query($query);
        while($blogRow = mysqli_fetch_assoc($result)) {
            $blogID = $link->real_escape_string($blogRow['blog_id']);
            $blogTitle = $link->real_escape_string(html_entity_decode($blogRow['blog_title']));
            $blogDate = $blogRow['pub_date'];
            $blogPhoto = $link->real_escape_string($blogRow['image']);
            $blogAuthor = $link->real_escape_string($blowRow['author']);
            $blogContent = $link->real_escape_string($blogRow['content']);  

            $blogTitle = stripslashes($blogTitle);
            $blogContent = html_entity_decode(stripslashes(truncate($blogContent, 150)));

            $html .="<div class='masonryBlock' id='".$postID."'>
                    <a href='post.php?id=".$blogID."'>
                    <div class='imgholder'><img src='uploads/blogs/photos/".$blogPhoto."'></div>
                    <strong>".$blogTitle."</strong>
                    <p>".$blogContent."</p>
                    </a></div>";

        }
    }
    echo $html;
}

我试过使用 jquery infinite-scroll 插件，但这样做似乎要困难得多。我不知道这里有什么问题。我已经添加了警报并进行了测试，并且 javascript 脚本正在完全处理，所以它必须与 blocks.php 一起使用，对吗？

编辑:我通过将 sql 查询更改为 SELECT * FROM all_posts WHERE post_id < '".$startID."' ORDER BY post_id DESC LIMIT 15 临时修复了这个问题。

block 现在通过 ajax 加载，但是它们一次只加载一个 block 。 ajax 正在为每个单独的 block 发送一个请求，并且它们一个接一个地淡入淡出，是否可以使用 jquery masonry 使它们同时淡入淡出？

Answer 1

我在另一个答案中看到了您的代码，我建议在 MySql 中使用 LIMIT 功能而不是偏移值。示例:

SELECT * FROM all_posts ORDER BY post_id DESC LIMIT '".(((int)$page)*5)."',5

这将只获取 AJAX 请求中的页码并自动获取偏移量。这是一个一致的查询，独立于页面上的最后结果。在您的 jQuery 代码中发送类似 page=1 或 page=2 的内容。这可以通过几种不同的方式完成。

首先统计页面上构建的元素个数，除以页面上的个数。这将产生一个页码。

其次，您可以使用 jQuery 并将当前页码绑定(bind)到正文:

$(body).data('page', 1)

每次加载页面时增加 1。

这样做确实是更好的方法，因为它对所有操作使用一个查询，并且不需要关于页面上已有数据的大量信息。

唯一需要注意的是，此逻辑要求第一个页面请求为 0，而不是 1。这是因为 1*5 将计算为 5，跳过前 5 行。如果它是 0，它将评估为 0*5 并跳过前 0 行(因为 0*5 是 0)。

让我知道您有任何问题!