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

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

  • 3692
  • Дата: 13.02.2019 в 14:38:00

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Комментарии:

Loading Comments...