Автоматическое обновление сайта с помощью jQuery
-
3347
-
46

Я иногда обожаю быдлокодить на jQuery. Зачем пилить какие-то классы, компоненты и прочие сложные вещи, если 5-ю строчками кода можно сделать сайт полностью асинхронным. Как? Очень просто!
На самом деле, jQuery отличная библиотека. Больше всего у меня горит, когда люди начинают хейтить её или тех, кто ею пользуется. Чаще всего, это уникальные люди с 47-й хромосомой.
Я работаю над одним проектом в свободное время и там юзаю ReactJS с jQuery (знаю, слишком идеально). Недавно пришла задача и мне было лень её делать "по красоте", а задачу надо было сделать быстро.
Приведу два примера, как сделать ваш сайт с автоматическим обновлением контента без перезагрузки самой страницы.
# Обновление комментариев
Требовалось автоматически обновлять комментарии, каждые 5 сек (к чёрту сокеты). Ничего на сервера разрабатывать не надо.
Всё гениальное просто!
setInterval(() => {
$.get("/").then(function(html) {
// Получаем от сервера HTML код, вытаскивает оттуда нужный DOM элемент.
var list = $(".activity-list", html); // берём из этого ответа элемент UL, со списком комментариев.
$(".activity-list").html(list); // И уже в нашу страницу вставляем актуальный список комментариев (заменяем DOM-элемент)
});
}, 5000); // каждые 5 секунд
# Подгрузка новостей без перезагрузки
Представим, что у вас на сайте есть много новостей и внизу установлена пагинация. Но неожиданно вы или ваш руководитель решил, что надо запилить функцию "Показать ещё", при клике на которую, подгружаются следующие новости.
Всё гениальное просто!
$(document).ready(function() {
var page = 1; // первая страница
// Вешаем событие клика на кнопку "Показать ещё"
$('#loadMoreButton').click(function() {
page++; // Каждый раз увеличиваем счётчик номера страницы
$.get("/news?page=" + page).then(function(html) {
var list = $(".posts", html);
$(".posts").html(list);
}).catch(function() { // Если сервер выдал 404 или другую HTTP-ошибку, то скрываем кнопку "Показать ещё"
$('#loadMoreButton').hide();
});
});
});
Таким образом, вы можете отправлять на любой адрес своего сайта GET-запрос и вытаскивать нужные вам данные.
P.S.: Если у вас начался бугурт, то охладите трахание. Этот пример показывает, как получать в асинхронном режиме актуальные данные со своего сайта без разработки API.
ПОДПИШИСЬ НА ОБНОВЛЕНИЯ
Только новые публикации и никакого мусора.