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

  • среда, 13 февраля 2019 г. в 11:38:00

Я иногда обожаю быдлокодить на jQuery. Зачем пилить какие-то классы, компоненты и прочие сложные вещи, если 5-ю строчками кода можно сделать сайт полностью асинхронным. Как? Очень просто!

На самом деле, jQuery отличная библиотека. Больше всего у меня горит, когда люди начинают хейтить её или тех, кто ею пользуется. Чаще всего, это уникальные люди с 47-й хромосомой.

Я работаю над одним проектом в свободное время и там юзаю ReactJS с jQuery (знаю, слишком идеально). Недавно пришла задача и мне было лень её делать "по красоте", а задачу надо было сделать быстро.

Приведу два примера, как сделать ваш сайт с автоматическим обновлением контента без перезагрузки самой страницы.

Обновление комментариев

Требовалось автоматически обновлять комментарии, каждые 5 сек (к чёрту сокеты). Ничего на сервера разрабатывать не надо.

Всё гениальное просто!


_10
setInterval(() => {
_10
$.get("/").then(function(html) {
_10
// Получаем от сервера HTML код, вытаскивает оттуда нужный DOM элемент.
_10
var list = $(".activity-list", html); // берём из этого ответа элемент UL, со списком комментариев.
_10
$(".activity-list").html(list); // И уже в нашу страницу вставляем актуальный список комментариев (заменяем DOM-элемент)
_10
});
_10
}, 5000); // каждые 5 секунд

Подгрузка новостей без перезагрузки

Представим, что у вас на сайте есть много новостей и внизу установлена пагинация. Но неожиданно вы или ваш руководитель решил, что надо запилить функцию "Показать ещё", при клике на которую, подгружаются следующие новости.

Всё гениальное просто!


_15
$(document).ready(function() {
_15
var page = 1; // первая страница
_15
_15
// Вешаем событие клика на кнопку "Показать ещё"
_15
$('#loadMoreButton').click(function() {
_15
page++; // Каждый раз увеличиваем счётчик номера страницы
_15
$.get("/news?page=" + page).then(function(html) {
_15
var list = $(".posts", html);
_15
$(".posts").html(list);
_15
}).catch(function() { // Если сервер выдал 404 или другую HTTP-ошибку, то скрываем кнопку "Показать ещё"
_15
$('#loadMoreButton').hide();
_15
});
_15
});
_15
_15
});

Таким образом, вы можете отправлять на любой адрес своего сайта GET-запрос и вытаскивать нужные вам данные.

P.S.: Если у вас начался бугурт, то охладите трахание. Этот пример показывает, как получать в асинхронном режиме актуальные данные со своего сайта без разработки API.

#асинхронность#пагинация