Бесконечный скроллинг на JavaScript + PHP
Сегодня затронем тему бесконечного скроллинга. Как реализовать подгрузку записей или другой информации по мере скроллинга. Работает это так - пользователь листает методом скролла записи, и когда доходит до самого низа, новые записи грузятся автоматически или при нажатии одной кнопки.
Данный скрипт мы будем писать на языке JavaScript с использованием библиотеки jQuery, и конечно же за отдачу данных будет отвечать скрипт на PHP. Зачем это нужно, спросите вы? Это удобно, когда информации очень много и количество страниц зашкаливает, по примеру новостей в ВК.
Для начала подключим библиотеку jQuery, если она не подключена:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
Далее создадим файл database.php
, в котором будем подключаться к базе данных:
$database = mysql_connect ("хост_БД", "имя_пользователя_БД", "пароль_к_БД");
mysql_select_db ("имя_БД", $database);
Затем выведем 10 записей из базы:
<?php
// Подключимся к базе данных
include "database.php";
// Получим первые 10 записей
$result = mysql_query("SELECT * FROM `articles` ORDER BY `article_id` DESC LIMIT 10", $database);
// Создадим массив
$articles = array();
while($row = mysql_fetch_assoc($result))
{
$articles[] = $row;
}
// Покажем записи
echo "<table id="articles">";
foreach ($articles as $article):
echo "<tr>
<td>".$article['title']."</td>
<td>".$article['text']."</td>
</tr>";
endforeach;
echo "</table>";
?>
<!-- Кнопку нужно оставить в том случаи, если вы выбрали метод подгрузки нажатием. Если в скрипте ничего менять не будете - то удалите данную кнопку и данные будут подгружаться автоматически. -->
<button id="more">Ещё</button>
Далее создадим скрипт-обработчик, и назовем его articles.php
:
<?php
// Подключимся к базе данных
include "database.php";
// Укажем, с какой страницы следует подгружать записи
$startFrom = $_POST['start'];
// Получаем 10 записей, начиная с последней отображенной
$result = mysql_query("SELECT * FROM `articles` ORDER BY `article_id` DESC LIMIT {$start}, 10", $database);
// Создадим массив записей, начиная с последней отображенной
$articles = array();
while ($row = mysql_fetch_assoc($result))
{
$articles[] = $row;
}
// Превращаем массив записей в json-строку для передачи через Ajax-запрос
echo json_encode($articles);
?>
С php частью мы закончили. Остался сам скрипт, который будет запрашивать записи:
$(document).ready(function(){
/* Отслеживаем, происходит ли в данный момент ajax-запрос. В начале дадим ей значение false */
var inProgress = false;
/* С какой записи будем грузить остальные записи */
var start = 10;
/* Используйте вариант $('#more').click(function() для того, чтобы задействовать кнопку "Ещё". */
/* С данным вариантом данные будут грузиться автоматически */
$(window).scroll(function() {
/* Если высота прокрутки + высота окна больше или равны высоте всей страницы и нет выполняемого ajax-запроса - то запускаем подгрузку */
if($(window).scrollTop() + $(window).height() >= $(document).height() - 200 && !inProgress) {
$.ajax({
/* URL нашего скрипта-обработчика */
url: 'articles.php',
/* Метод отправки данных, поддерживаются GET и POST */
method: 'POST',
/* Передаваемые данные */
data: {"start" : start},
/* Функция, которая выполняется до отправки */
beforeSend: function() {
/* Показываем, что на данный момент выполняется ajax-запрос */
inProgress = true;}
/* Функция, которая выполняется по факту запроса */
}).done(function(data){
/* Преобразуем полученный json обратно в массив */
data = jQuery.parseJSON(data);
/* Если массив не пустой */
if (data.length > 0) {
$.each(data, function(index, data){
/* Находим блок с записями и дозаполняем его */
$("#articles").append("<tr><td>" + data.title + "</td><td>" + data.text + "</td></tr>");
});
/* После успешной обработки меняем обратно на false */
inProgress = false;
// При каждом запросе увеличиваем значение на 10, чтобы каждый раз получать новые статьи
start += 10;
}});
}
});
});
Как видите, всё не так и сложно. На этом можем закончить данную статью.