Пытаюсь сделать бесконечную загрузку на Jquery. В интернете нашел множество решений, но там контент загружается стопкой (например 10 статей, после прокрутки еще 10 статей). Хочу сделать, как на сайте rbc, прочитал статью, дошел до низа и хоп 1 исчезает появляется 2 итд. В интернете скопировал один код, но проблемы с sql запросами, никак не могу сделать так, что бы загружалась по 1 статье.
файл index.php
<?php
include 'inc/db.php';
// Получаем первые 10 статей, которые будут видны изначально
$res = mysqli_query($db, "SELECT * FROM `articles` ORDER BY `article_id` DESC LIMIT 1");
// Формируем массив из 10 статей
$articles = array();
while($row = mysqli_fetch_assoc($res))
{
$articles[] = $row;
}
?>
<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8" />
<title>Все статьи</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
</head>
<body>
<div style="width: 200px;" id="articles">
<?php foreach ($articles as $article): ?>
<p><b><?php echo $article['title']; ?></b><br />
<?php echo $article['text']; ?></p>
<?php endforeach; ?>
</div>
<button id="more">Дальше</button>
</body>
</html>
файл обработчик
<?php
include 'inc/db.php';
// C какой статьи будет осуществляться вывод
$startFrom = $_POST['startFrom'];
// Получаем 10 статей, начиная с последней отображенной
$res = mysqli_query($db, "SELECT * FROM `articles` ORDER BY `article_id` DESC LIMIT {$startFrom}, 10");
// Формируем массив со статьями
$articles = array();
while ($row = mysqli_fetch_assoc($res))
{
$articles[] = $row;
}
// Превращаем массив статей в json-строку для передачи через Ajax-запрос
echo json_encode($articles);
сам файл js
$(document).ready(function(){
/* Переменная-флаг для отслеживания того, происходит ли в данный момент ajax-запрос. В самом начале даем ей значение false, т.е. запрос не в процессе выполнения */
var inProgress = false;
/* С какой статьи надо делать выборку из базы при ajax-запросе */
var startFrom = 10;
/* Используйте вариант $('#more').click(function() для того, чтобы дать пользователю возможность управлять процессом, кликая по кнопке "Дальше" под блоком статей (см. файл index.php) */
$(window).scroll(function() {
/* Если высота окна + высота прокрутки больше или равны высоте всего документа и ajax-запрос в настоящий момент не выполняется, то запускаем ajax-запрос */
if($(window).scrollTop() + $(window).height() >= $(document).height() && !inProgress) {
$.ajax({
/* адрес файла-обработчика запроса */
url: 'obrabotchik.php',
/* метод отправки данных */
method: 'POST',
/* данные, которые мы передаем в файл-обработчик */
data: {"startFrom" : startFrom},
/* что нужно сделать до отправки запрса */
beforeSend: function() {
/* меняем значение флага на true, т.е. запрос сейчас в процессе выполнения */
inProgress = true;}
/* что нужно сделать по факту выполнения запроса */
}).done(function(data){
/* Преобразуем результат, пришедший от обработчика - преобразуем json-строку обратно в массив */
data = jQuery.parseJSON(data);
/* Если массив не пуст (т.е. статьи там есть) */
if (data.length > 0) {
/* Делаем проход по каждому результату, оказвашемуся в массиве,
где в index попадает индекс текущего элемента массива, а в data - сама статья */
$.each(data, function(index, data){
/* Отбираем по идентификатору блок со статьями и дозаполняем его новыми данными */
$("#articles").append("<p><b>" + data.title + "</b><br />" + data.text + "</p>");
});
/* По факту окончания запроса снова меняем значение флага на false */
inProgress = false;
// Увеличиваем на 10 порядковый номер статьи, с которой надо начинать выборку из базы
startFrom += 10;
}});
}
});
});
подключение к базе данных
<?php
// Хост (обычно localhost)
$db_host = "localhost";
// Имя базы данных
$db_name = "maindb2";
// Логин для подключения к базе данных
$db_user = "root";
// Пароль для подключения к базе данных
$db_pass = "";
//Подключаемся к базе
$db = mysqli_connect ($db_host, $db_user, "", $db_name) or die ("Невозможно подключиться к БД");
// Указываем кодировку, в которой будет получена информация из базы
mysqli_query ($db, 'set character_set_results = "utf8"');
