从数据库动态加载元素答案

【问题标题】：Dynamic loading elements from database从数据库动态加载元素
【发布时间】：2014-09-26 05:43:57
【问题描述】：

我正在尝试创建一个显示存储在数据库中的 cmets 的博客事物：但是我希望 cmets 在用户向下滚动时出现，在页面上动态创建它，而不是链接到下一组厘米。

目前我正在使用 MySQL 和 php 来显示存储的 cmets。

$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 在页面加载之前加载数据......那么最好的方法是什么？

谢谢大家！

【问题讨论】：

您应该考虑在滚动时在 mysql 查询中使用“limit”组合。
我认为你需要访问这个page

标签： php mysql database dynamic comments

【解决方案1】：

最好的解决方案是在 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 个 cmets。

【讨论】：

限制sql很简单，但我更多的是指如何动态显示cmets。 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); 但我不能在

【解决方案2】：

只需加载所有数据并隐藏第二个数据直到最后一个。如果用户滚动值与用户滚动鼠标时的 scrollTop() 返回值具有相同的值，则使用诸如 scrollTop() 之类的 jquery 技巧来检测滚动并逐步淡入（）您的 div。

【讨论】：

如果我有 100 多个 cmets，这将不是最好的方法。不过谢谢你的建议。

【解决方案3】：

好吧，从我对此进行的大量研究来看：如果不先加载所有 cmets，实际上不可能通过 mySQL 动态更新。这是因为 PhP 在页面显示之前加载，所以 JavaScript 不能动态呈现更多的 cmets除非页面被刷新。

我将介绍一下 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 为我指明了正确的方向。

【讨论】：