Динамическая загрузка элементов из базы данных

Question

Динамическая загрузка элементов из базы данных

Я пытаюсь создать блог, который отображает комментарии, хранящиеся в базе данных: однако я хотел бы, чтобы комментарии появлялись, когда пользователь прокручивал страницу вниз, динамически создавая ее на странице, а не имея ссылки на следующий набор комментариев.

На данный момент я использую 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 загружает данные до того, как страница … так, что будет лучшим способом для этого?

Спасибо, парни!

0

comments database dynamic mysql php

Решение

Другие решения

Просто загрузите все свои данные и скройте вторые данные до последних. Используйте приемы jquery, такие как scrollTop (), чтобы обнаружить прокрутку и fadeIn () ваш div шаг за шагом, если значение пользовательской прокрутки совпадает с возвращаемым значением scrollTop () во время прокрутки мышью.

1

Итак, из-за большого количества исследований, которые я вложил в это: на самом деле невозможно динамически обновляться через 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);
}
});

}
}
});

Работает как шарм. Благодаря Хендри Танака для направления меня в правильном направлении.

1

Источник

Accepted Answer

Лучшим решением было бы вам ограничить комбинацию в запросе 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 комментариев за раз при каждой прокрутке.

1