DjangoBB LoFi version

1 2

hound

Янв. 9, 2015 17:43:17

Добрый день, несколько глупый вопрос назрел…
Если взять как пример сайты - VK, YouTube, то там когда ты переходишь по ссылкам (новости, подписки т п.), то вся страница целиком не перезагружается, т.е каждый раз при переходе по ссылке ajax-щи загружается нужный контент и заменяется в элементе на странице.

Кто делал подобное с джангой? Понятное дело, что тут больше вопрос к клиентской части, но например как быть с url'ами?
Чтобы не писать вывод одной страницы дважды, создаем один url на одну страницу и уже в функции представления смотреть был этот запрос аяком или нет? Потому что если запрос был без аякса, то нам нужно чтобы вместе с контентом этой странице еще и передавались шапка страницы, подвал (то что подключаем тегом extern в шаблоне), а если запрос был по аяксу, то эти блоки передавать не надо.

Кто сталкивался с таким вопросом, какие решения можете посоветовать?

Alen

Янв. 9, 2015 19:40:42

hound
Кто сталкивался с таким вопросом, какие решения можете посоветовать?

С этим сталкивались все кто писал на django. Решение простое: на get-запрос отдавать отрендеренную страницу, на post-запрос отдавать json и уже на клиенте при помощи javascript запихивать данные в нужные места.

def some_view(request):
    if 'some_key' in request.POST.keys():
       # Отдаем данные в JSON для AJAX-запроса.
        return JsonResponse({'result': 'ok', 'la-la-la': 'topolya'})
    else:
       # Отдаем страницу целиком.
       context = {'la-la-la': 'topolya''}
       return render(request, 'base.html', context)

hound

Янв. 10, 2015 01:29:38

Хм…может не правильно выразил свою мысль или не до конца понял Ваш ответ…
но зачем при аякс запросе отдавать json? Если нужно, например, вывести не просто пару изменяемых значений, а какую-то страницу?
По аналогии, если брать тот же самый YouTube, то там при переходе из “рекомендуемые” в “мои подписки” подгруживается же отрендеренный HTML шаблон?

GreyZmeem

Янв. 10, 2015 01:43:41

На Youtube, afaik, используется angular и html5-mode (тыц).
Если вы откроете youtube в IE версии 9 - то при переходе у вас станица будет полностью перезагружаться, т.к. html5 history api не работает: http://caniuse.com/#search=history

Alen

Янв. 10, 2015 07:35:07

hound
но зачем при аякс запросе отдавать json?

А как по вашему работает AJAX? Json является родным форматом сериализации для JavaScript (Вообще JSON - это корректный JavaScript-код) и с ним удобно работать на фронтэнде.

hound
Если нужно, например, вывести не просто пару изменяемых значений, а какую-то страницу?

И что мешает вам передать имя/путь или контент этой страницы в json?

P.S. Чисто технически вам ничто не мешает отдавать html или xml, это вопрос всего лишь удобства.

hound

Янв. 10, 2015 12:29:00

Ладно, например, у нас есть сайт, который имеет несколько страниц и у всех страниц есть общая шапка, подвал и меню, т.е у нас есть главный шаблон (с меню, подвалом и шапкой) и по каждому шаблону для каждой странице.

main.html

<html>
<header>
<menu>
<div id="content">
{% block content %}
{% endblock %}
</div>
<footer>
</html>

И примерные шаблоны для приложений:

{% extends 'main.html' %}
{% block content %}
<h1>App1</h1>
{% endblock %}

и т.п.

Когда пользователь переходит напрямую по ссылке: example.com/app1
То джанга должна отдать полностью отрендеренный шаблон, вместе с extends ‘main.html’,
а если переход со странице идет с помощью ajax, то нужно отдать шаблон без extends ‘main.html’

$("a").on("click", function() {
   var url = $(this).attr('href');
    $.ajax({
         url: url,
         success: function(data) {
              $("div#content").html(data);
         }
    });
});

Ну как-то в общем виде…
Проще же тогда при аяксе тоже выдавать шаблон (зачем городить повторные куски кода), но как запрещать выдачу extends? Потому что при аяксе он и не нужен…
Либо я вообще в корне не правильно понимаю принцип работы с аякс подгрузкой контента…

Alen

Янв. 10, 2015 13:07:19

hound
Проще же тогда при аяксе тоже выдавать шаблон (зачем городить повторные куски кода), но как запрещать выдачу extends?

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

hound

Янв. 10, 2015 13:41:10

Так если код функции представления будет таким:

def show_page(request):
     return render(request, 'apps/app1.html')

Как бы одна та же самая функция представления будет для аякс подрузки так и для “обычного перехода по ссылке”.
Разве что уже на стороне клиента(если получать будем полный шаблон с шапками и т.п) вытаскивать блок #content и его вставлять…ну и вместе с этим еще из шаблона title вытаскивать…

Alen

Янв. 10, 2015 16:29:21

hound
Так если код функции представления будет таким

1. Вернитесь к шаблону, который я вам привел.
2. Выделите html-код из шаблона, который вы хотите менять при помощи Ajax и вынесите его в отдельный файл.
3. При POST запросе, читайте этот отдельный файл в переменную, например с именем content, и передавайте на frontend переменную посредством Json. {'result': ‘ok’, ‘content’ : content}
4.

 $("div#content").html(data['content']);

5. …
6 PROFIT!

hound

Янв. 10, 2015 16:37:57

Alen
Так тогда придется еще делать шаблоны…а если страниц много, то будет получатся, что шаблонов будет в 2 раза больше:
один шаблон для аякса (вырезанный), а второй для “обычного” перехода и если верстка меняться будет, то в 2 раза больше работы будет…