Django - Урок 031. Смена URL без перезагрузки страницы с частичной подгрузкой контента

Django, URL, JavaScript

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

Смысл в том, что когда пользователь хочет перейти на следующую страницу со списком статей и кликает на ссылку в пагинаторе , то производится перехват события клика, событие отменяется, но высылается AJAX запрос на сервер с номером запрашиваемой страницы. Когда сервер получает такой запрос, он производит рендеринг только списка статей и высылает его обратно.

Замена URL в браузере без перезагрузки страницы

Для главной страницы сайта я создал JavaScript файл index.js, в котором будет логика AJAX запроса, а также привязка обработчика клика по ссылкам в пагинаторе. Важным моментом является то, что я использую для пагинатора django-bootstrap3 . Соответственно, чтобы подключить обработчик клика, я использую селектор '.paginator > li > a' .

Содержимое файла будет следующим

class Index {

    static initPaginator() {
        document.body.querySelectorAll('.pagination > li > a')
                .forEach( link => link.addEventListener('click', Index.pagination_link_clickHandler) );
    }

    static pagination_link_clickHandler(event){
        event.preventDefault(); // запрещаем событие

        let path = event.target.href; // забираем путь
        let page = Global.getURLParameter(path, 'page');

        if (typeof page !== 'undefined') {
            jQuery.ajax({
                url: jQuery(this).attr('action'),
                type: 'POST',
                data: {'page': getURLParameter(path, 'page')}, // забираем номер страницы, которую нужно отобразить

                success : function (json) {
                    // Если запрос прошёл успешно и сайт вернул результат
                    if (json.result)
                    {
                        window.history.pushState({route: path}, "EVILEG", path); // устанавливаем URL в строку браузера
                        jQuery("#articles-list").replaceWith(articles); // Заменяем div со списком статей на новый
                        Index.initPaginator(); // Переинициализируем пагинатор
                        jQuery(window).scrollTop(0); // Скроллим страницу в начало
                    }
                }
            });
        }
    }
}

Index.initPaginator();

Я стараюсь использовать стандарт ecmascript 6. Поэтому для страницы index используется класс Index для обобщения применяемых методов.

Для получения номера страницы в URL используем функцию getURLParameter .

Структура шаблонов

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

То есть будет:

  • article_preview.html - этот шаблон рассматривать не будем, поскольку он не интересен для нас в данном случае
  • article_previews_list.html
  • index.html

index.html

index.html наследован от базового шаблона base.html в котором имеется блок для подключения javascript файлов.

{% extends 'base.html' %}
{% block page %}
    {% include 'article_previews_list.html' %}
{% endblock %}
{% block javascript_footer %}
    <script src="/static/js/index.js"></script>
{% endblock %}

article_previews_list.html

Список статей представляет собой div , который будет заменяться при каждом запросе.

<div id="articles-list">
    {% load bootstrap_pagination from bootstrap3 %}
    {% for article in object_list %}
        {% include 'knowledge/article_preview.html' %}
    {% endfor %}
    {% bootstrap_pagination object_list pages_to_show="10" %}
</div>

urls.py

Маршрут для главной страницы будет выглядеть следующим образом

urlpatterns = [
    url(r'^$', views.IndexView.as_view(), name='index')
]

views.py

А теперь рассмотрим представление, которое будет возвращать список статей или сразу всю страницу

class IndexView(View):
    template_name = 'index.html'

    def get(self, request):
        return render(request=request, template_name=self.template_name, context={'object_list': get_paginated_page(request, Article.objects.all())})

    def post(self, request):
        if request.is_ajax():
            return JsonResponse({
                "result": True,
                "articles": render_to_string(
                    request=request,
                    template_name='article_previews_list.html',
                    context={'object_list': get_paginated_page(request, Article.objects.all())}
                )
            })
        else:
            raise Http404()

Важным моментом является то, что сайт должен корректно обрабатывать оба вида запросов, как обычный, так и AJAX запрос. Поскольку пользователь может зайти как напрямую на одну из страниц, так и с помощью пагинации на сайте.

Возможно, вас в данном коде заинтересует метод get_paginated_page, который с помощью класса Paginator генерирует нужную страницу для отображения.

# -*- coding: utf-8 -*-

from django.core.paginator import Paginator, PageNotAnInteger, EmptyPage


def get_paginated_page(request, objects, number=10):
    current_page = Paginator(objects, number)
    page = request.GET.get('page') if request.method == 'GET' else request.POST.get('page')
    try:
        return current_page.page(page)
    except PageNotAnInteger:
        return current_page.page(1)
    except EmptyPage:
        return current_page.page(current_page.num_pages)

Для Django рекомендую VDS-сервера хостера Timeweb .

Рекомендуем хостинг TIMEWEB
Рекомендуем хостинг TIMEWEB
Стабильный хостинг, на котором располагается социальная сеть EVILEG. Для проектов на Django рекомендуем VDS хостинг.
Поддержать автора Donate
B

Евгений Здравствуйте! Не могу понять вот эту часть кода: url: jQuery(this).attr('action')
наверное здесь должен быть путь к url, тогда 'action' на какой url указывает?

Добрый день. Там будет url, на который указывает ссылка тега a в пагинаторе, если правильно помню )) Написал этот код и забыл.

Комментарии

Только авторизованные пользователи могут публиковать комментарии.
Пожалуйста, авторизуйтесь или зарегистрируйтесь
Donate

Здравствуйте, уважаемые пользователи EVILEG !!!

Если сайт вам помог, то поддержите разработку сайта финансово, пожалуйста.

Вы можете сделать это следующими способами:

Спасибо, Евгений Легоцкой

DK
1 апреля 2020 г. 8:03
Dmitry Kozhinov

C++ - Тест 001. Первая программа и типы данных

  • Результат:40баллов,
  • Очки рейтинга-8
A
30 марта 2020 г. 12:47
Anna

C++ - Тест 001. Первая программа и типы данных

  • Результат:60баллов,
  • Очки рейтинга-1
A
29 марта 2020 г. 12:14
Alexanderv66

C++ - Тест 003. Условия и циклы

  • Результат:71баллов,
  • Очки рейтинга1
Последние комментарии
3 апреля 2020 г. 8:06
Konstantin Grudnitskiy

Я надеюсь вы уже разобрались в чем дело, но если вдруг нет, то проблема состоит в том, что вы пытаетесь запустить программу из интерпретатора питона. Файл main.py это уже готова…
3 апреля 2020 г. 6:18
Konstantin Grudnitskiy

>>> text = 'hello world'>>> ' '.join(word for word in text.split()[:-1])'hello'>>> def remove_last_word(text):... return text and ' '.join(word for word in text.s…
27 марта 2020 г. 14:40
Евгений Легоцкой

Добрый день. В конце пятой статьи скачать можете.
27 марта 2020 г. 14:28
mkdir _

Здравствуйте, а можно, пожалуйста, ссылку на целые исходники, если есть?
27 марта 2020 г. 4:36
Евгений Легоцкой

Скорее всего также, как и для установки всех остальных переменых в CMake, через использование set
Сейчас обсуждают на форуме
3 апреля 2020 г. 12:53
BlinCT

Само собою на компе этого незаметно.
3 апреля 2020 г. 8:48
Intruder

Евгений, добрый день. Спасибо!
s
3 апреля 2020 г. 7:52
solmik

да вроде много чего установленно, если неправильный путь указать то же самое, пробовал запустить видео через плей лист (по примерам из док)и из него назад путь взять, не получилось
3 апреля 2020 г. 5:50
Юрий-В

Спасибо ! Поковырявшись и посмотрев интерфейс QSvgRender и т.д. понимаю что похоже нужно будет лезть в реализацию ::render(..). Кто может подсказать как и где выкачать актуальные исходники…
2 апреля 2020 г. 2:46
Евгений Легоцкой

Я думаю, что это где-то описано, но в такой глубине документации и максимум в самых базовых вещах, то есть отдельно в классах этого не пишут, просто потому, что придётся писать для каждого класс…
EVILEG
О нас
Услуги
© EVILEG 2015-2019
Рекомендует хостинг TIMEWEB