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

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

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

Существует несколько способов сделать это:

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

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

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

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

Благодаря!

3 Solutions collect form web for “Сначала визуализировать страницу и обновить ее через AJAX, используя тот же шаблон HTML”

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

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

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

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

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, вы получите содержимое комментария (один комментарий) .. после этого просто нажмите его, чтобы перечислить .. fe используя jQuery следующим образом:

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

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

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

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

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

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

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

  • Django-Chartit 'source' должен быть либо QuerySet, Model или Manager
  • Как сделать работу javascript с python на Flask?
  • Что эквивалентно «has_key» в javascript?
  • Передать переменную JavaScript в Flask url_for
  • Selenium: Как вставлять / выполнять Javascript на странице перед загрузкой / выполнением каких-либо других скриптов на странице?
  • Интегрируйте chessbord.js с Flask
  • Не удается найти элемент в селене по имени, имени или ссылке или WebDriverWait (). Такое исключение ошибки не возникает каждый раз
  • Разница в цепочке ES6 Promises и PEP3148 Фьючерсы
  • Python - лучший язык программирования в мире.