Загрузка новых страниц через Ajax без обновления всей панели навигации Django

Я новичок в Django и создаю свой собственный сайт. Я написал страницу base.html, которая содержит основное тело, CSS, js, шрифты и навигационную панель, которую будут иметь все страницы моего сайта. Навигационная панель находится в другом HTML-файле, navbar.html

Теперь, поскольку CSS/js/fonts/navbar, включенные в base.html, будут загружаться на каждой странице и не будут меняться, есть ли способ с помощью Ajax загрузить только фактическое содержимое страницы, которое изменяется плавно, без обновления всей страницы?

Например, часть страницы, которая визуально меняется каждый раз, находится внутри тега <section class="home"></section>

При использовании JQuery все довольно просто:

<script>
   function load_page(url) {
      $.ajax({
         url: url,
         success: function (data) {
            $('#nav_id').html('');
            data.nav_items.forEach(item => {
               $('#nav_id').append($('<div>').onclick(load_page(item.url)).text(item.title));
            }
         },
         error: function () {
            alert('Could not load data');
         }
      });
   }
</script>

А в вашем url вы можете определить это как /nav/str:slug/, что приведет к такому виду: 

def nav_ajax(request, slug):
   if slug == 'a':
       return JsonResponse({
          'navitem1': {
              'title': 'A',
              'url': reverse('your_nav_url_name', kwargs={'slug':'a'}),
       },
       # other menu items
       )
   else:
      return JsonResponse({}) # default menu items
Вернуться на верх