django + ajax - поиск лучшего подхода

151

13 апреля 2018, 16:16

Добрый день. Есть простой тестовый проект на Django. Меню из трех страниц, на каждой - текст.

Задача: переходить между страницами без перезагрузки страницы.

Читая решения и все, что связано со связкой "django+ajax", понимаю, что имею большое число белых пятен в понимании как это должно работать. Большинство ответов и гайдов, которые я встречал, предлагают использование этой функции:

render_to_string

Читая доки, не понятно что передавать в "context".

Кроме этого кто-то советует копать в сторону JsonResponse, кто-то в Dajax и пр.

На данный момент имею решение, которое не работает. При переходе на другую страницу - происходит два запроса, вместо одного. Рушится структура DOM-дерева (в контейнер главного html-документа, где должен заменяться сугубо текст, вставляется другой полноценный html-документ).

Код, на примере одной из страниц (они одинаковы).

urls.py:

urlpatterns = [
url(r'^$', real_home, name='real-home'),
url(r'^home', home, name='home'),
url(r'^first', first_page, name='first'),
url(r'^second/', second_page, name='second'),]

view.py:

def first_page(request):
context = {
    "title": "First Page",
}
return render(request, "first.html", context,)

base.html (сокращенный):

<!DOCTYPE html>
<li><a href="#" class="class_first"> First page</li> </a>
 <div class='container'>
   {% block content %}
   {% endblock content %}
 </div>
 <script >
    $(document).ready(function(){
     $(".class_home").click(function(){
        $.ajax({url: "/home", success: function(result){
          $(".container").html(result);
        $(".container").fadeOut(0).fadeIn(1000);
          console.log(result);
 </script>

first.html

{% block head_title %}
{{ title }} | {{ block.super }}
{% endblock head_title %}
{% block content%}
<center><h1>First page CONTENT</h1></center>
<br>
<p>Content text</p>
{% endblock content%}