無限滾動與MySQL數據

Question

我遵循了位於本主題中的幫助： 使用帶有MySQL數據庫的無限滾動

並且已經接近使其正常工作。 我有一個頁面使用jquery砌體顯示在塊中，其中的塊由mysql數據庫中的數據填充。 當我滾動到頁面的末尾時，我成功獲取了loading.gif圖像，但圖像后立即顯示“沒有其他帖子可顯示”。 如果那是真的，那應該說些什么。 我最初只在5個帖子中調用了10-15個帖子，所以當我到達頁面底部時，其余的帖子應該加載，但是我收到的消息應該是在實際上沒有更多的時候出現了帖子。

這是我的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>');
                        }
                    }
                });
            }
        }
    });

這是塊實際位於的頁面上的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無限滾動插件，但是用這種方法似乎要困難得多。 我不知道這是什么問題。 我添加了警報並進行了測試，並且javascript腳本正在完全處理中，因此它必須與blocks.php對不對？

編輯：通過將sql查詢更改為SELECT * FROM all_posts WHERE post_id < '".$startID."' ORDER BY post_id DESC LIMIT 15我對此問題進行了臨時修復SELECT * FROM all_posts WHERE post_id < '".$startID."' ORDER BY post_id DESC LIMIT 15

現在，這些塊是通過ajax加載的，但是它們一次只能加載一個塊。 Ajax正在為每個單個塊發送一個請求，並且它們正在逐個消失，是否可以通過jquery石工一次使它們全部消失？

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並將當前頁碼綁定到正文：

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

每加載一頁將其遞增1。

這樣做確實是更好的方法，因為它對所有操作都使用一個查詢，並且不需要有關該頁面上已有數據的大量信息。

唯一需要注意的是，此邏輯要求第一頁請求為0，而不是1。這是因為1 * 5將求值為5，從而跳過了前5行。 如果其值為0，它將求值為0 * 5，並跳過前0行（因為0 * 5為0）。

讓我知道您有任何疑問！

Answer 2

您是否嘗試過調試？

如果您尚未使用，我建議您獲取firebug插件。

Ajax調用返回空嗎？ 如果是這樣，請嘗試回顯sql並確認該語句正確，並且所有變量都包含預期的信息。 考慮到客戶端，服務器和數據庫之間發生大量通信，許多事情可能會失敗。

為了回應您的評論，您需要在這段代碼中添加html：

if(html){
     $(".blockContainer").append(html);
     $('div#ajaxLoader').hide();
}

我會在if語句之前執行console.log（html）和console.log（$（“。blockContainer”）。length） 。