Сначала визуализируйте страницу и обновите ее через AJAX, используя тот же шаблон HTML

Question

Допустим, у вас есть представление под названием «View Story», которое представляет собой просто веб-страницу, отображаемую на сервере с помощью Python / Django. На этой странице внизу приведен список комментариев, отображаемых как часть шаблона «Просмотр истории» с использованием системы шаблонов Django (в цикле). Эта страница также позволяет добавить комментарий в список. Это делается через AJAX, и страница обновляется новым комментарием (без отправки нового запроса на полную страницу).

Теперь при добавлении нового комментария в конец списка я хочу, чтобы HTML-код, сгенерированный для этого нового комментария (что-то внутри <li>), использовал точно такой же код, который использовался для генерации исходных комментариев, отправленных клиент через оригинальный запрос.

Есть несколько способов сделать это:

1. Пусть начальный рендеринг перебрасывает данные комментария в переменную javascript, и после рендеринга страницы добавьте содержимое через javascript. Затем, когда добавляются новые комментарии, тот же самый javascript может использоваться для рендеринга нового. Проблема: с точки зрения поисковой системы, я не уверен, что Google сможет проиндексировать комментарии, если они будут сгенерированы после того, как страница будет отображена - я думаю, что не

2. Каждый раз, когда через AJAX добавляется новый комментарий, запрос ajax возвращает фактический HTML-код для размещения на странице, а не только данные JSON нового комментария. HTML может быть создан с использованием того же фрагмента шаблона, который использовался для визуализации исходной страницы. Проблема в том, что он связывает этот AJAX-запрос с конкретным представлением или способом его рендеринга, который мне не нравится.

3. Аналогично # 2, за исключением того, что делается отдельный запрос для получения HTML-кода для нового комментария или, возможно, всех комментариев, а список просто стирается и перерисовывается. Не нравится, потому что это крайне неэффективно и отнимает много времени.

Итак, подведем итог, я хочу, чтобы избежать дублирования кода шаблона / HTML для одного представления. И мне хотелось бы получить несколько советов о том, что сработало для других, потому что я уверен, что это распространенный случай, независимо от технологии на заднем плане.

Спасибо!

Answer 1

Вот что вы должны сделать:

view_story.html:

bla bla bla

Comments:
<ul id="comments">
{% for comment in comments %}
   <li>{% include "comment_item.html" %}</li>
{% endfor %}
</ul>
<from>Ajax form here</form>

чем вам нужно создать представление для добавления комментариев (ajax):

def add_comment(request):
    comment = Comment(...)
    return render_to_response('comment_item.html', {'comment': comment})

Таким образом, после того, как вы отправите свой ajax-запрос в представление add_comment, вы получите содержимое комментария (один комментарий) ... после этого просто нажмите его в список .. используя jQuery следующим образом:

$('ul#comments').append('<li>'+comment_content+'</li>')

Answer 2

Я думаю, что вариант 2 лучше. Он является инкрементным (только добавляет еще один комментарий при добавлении комментария) и повторно использует визуализацию. Если вам не нравится возвращать только HTML из Ajax-запроса, ответом должна быть структура JSON, включающая HTML как один компонент. Затем вы также можете нести статус (или любой другой) без дополнительного запроса, чтобы получить HTML.

Вариант 1 неэффективен: сервер должен отображать страницу так, как она должна отображаться вначале.

Вариант 3 также бесполезен: зачем делать два запроса на добавление одного комментария?

Answer 3

Существует также вариант 4:

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

Вы также можете попробовать вариант 2b:

Создайте HTML на сервере, как вариант 2, но вместо прямого доступа к базе данных передайте подпрограмму генерации JSON (или объект, который можно легко преобразовать в JSON). Это требует больше работы, но означает, что вы эффективно пишете API в то же время, когда пишете свой собственный веб-сайт.

Вариант 1 - это то, что будет использовать любое не веб-приложение. Несмотря на то, что поисковые системы улучшают свою способность обрабатывать AJAX, все равно настоятельно рекомендуется возвращать весь контент в HTML. Я думаю, что Javascript достаточно быстр во всех современных браузерах, что, за исключением огромных страниц 1, было бы вполне разумно, если бы не проблема SEO.

Существует также опция 5 - использовать Javascript на сервере для генерации страницы и использовать тот же код на клиенте. Это, вероятно, самый сложный подход, и я бы не рекомендовал его, если у вас нет веских причин.