從數據庫動態加載元素

我試圖創建一個顯示註釋存儲在數據庫中的博客事物：但是我希望當用戶向下滾動時在頁面上動態創建它，而不是有鏈接到下一組評論。從數據庫動態加載元素

目前我正在使用MySQL與PHP來顯示存儲的評論。

$query = "SELECT * FROM comment ORDER BY time DESC"; 
$result = mysql_query($query); 

while($data = mysql_fetch_assoc($result)){ 
    echo "<comment><div class='comment-bubble'><p>" . $data['comment'] . "</p></div>"; 
    //other div structure & data here 
}

我知道有插件可用，如jscroll。但是這會從其他HTML文件而不是從數據庫中獲取數據。

我知道該方法可能需要改變，因爲PHP在頁面加載之前加載數據......那麼最好的方法是什麼呢？

謝謝你們！

來源

2014-09-26 ChiMo

當你滾動時，你應該考慮在mysql查詢中使用「limit」組合。 – 2014-09-26 05:49:25

我認爲你需要訪問這個[頁]（http://stackoverflow.com/questions/11212396/load-content-from-mysql-on-scroll-with-ajax-post） – 2014-10-01 01:37:47

好吧，從我研究的數量來看，實際上不可能通過mySQL動態更新，而無需首先加載所有評論。這是因爲PhP在頁面顯示前加載，所以JavaScript不能動態顯示更多註釋，除非頁面被刷新。

我打算在AJAX上試試，因爲它是爲動態變化的網站而製作的。我希望儘快發佈我的完整答案。

編輯：使用jQuery AJAX我想出了這一點：

//Load more comments when reaching the end of the page 
var isPreviousEventComplete = true, isDataAvailable = true; 
$(window).scroll(function() { 
    if ($(document).height() - 50 <= $(window).scrollTop() + $(window).height()) { 
     if (isPreviousEventComplete && isDataAvailable) { 

      isPreviousEventComplete = false; 
      $(".LoaderImage").css("display", "block"); 

      $.ajax({ 
       type: "POST", 
       url: 'ajax/query.php', 
       data: "from=" + counter, 

       success: function (html) { 
        $("#comments").append(html); 
        counter++; 
        isPreviousEventComplete = true; 

        if (html == '') isDataAvailable = false; 

        $(".LoaderImage").css("display", "none"); 
       }, 
       error: function (error) { 
        alert("error " + error); 
       } 
      }); 

     } 
    } 
});

就像一個魅力。感謝Hendry Tanaka指引我朝着正確的方向。

來源

2014-10-01 03:06:00 ChiMo

保持movin'pal ... – 2015-01-16 05:19:28

最好的解決辦法是在MySQL查詢中限制組合。

例如

`SELECT * FROM comment ORDER BY time DESC LIMIT 0,10; # Retrieve rows 1-10`

，然後你可以嘗試使用

`SELECT * FROM comment ORDER BY time DESC LIMIT 10,10; # Retrieve rows 11-20`

等，以獲取在時間每次滾動時10個評論。

來源

2014-09-26 06:04:57

限制SQL很容易，但是我更多地指的是如何動態顯示評論。 'function load（）{var comments = document.getElementById（「comments」）; comments.innerHTML + =「<？php $ counter = 0; include'comments.php';？>」; counter + = 2; }' 是我現在試圖使用的： '$ query =「SELECT * FROM comment ORDER BY time DESC LIMIT」。$ counter。「，」。（$ counter + 2）;' 但是我不能在<？php中將$ counter設置爲一個javascript變量。有任何想法嗎？ – ChiMo 2014-10-01 01:34:55

只需加載所有數據並隱藏第二個數據直到最後一個。如果用戶滾動值與用戶滾動鼠標時的scrollTop（）返回值具有相同的值，請使用像scrollTop（）這樣的jQuery技巧來逐步檢測您的div的滾動和fadeIn（）div。

來源

2014-09-26 06:42:56

如果我有超過100條評論，這不會是最好的方法。但謝謝你的建議。 – ChiMo 2014-10-01 01:32:21

從數據庫動態加載元素

回答

相關問題