通过 Ajax 加载新页面而不刷新整个导航栏 Django答案

【问题标题】：Load new pages via Ajax without refreshing the whole nav bar Django通过 Ajax 加载新页面而不刷新整个导航栏 Django
【发布时间】：2022-02-07 17:56:50
【问题描述】：

我是 Django 新手，我正在建立自己的网站。我编写了一个base.html 页面，其中包含我网站所有页面的主体、CSS、js、字体和导航栏。导航栏位于另一个 HTML 文件中，navbar.html

现在，只要 base.html 中包含的 CSS/js/fonts/navbar 将在每个页面上加载并且不会更改，那么 Ajax 是否可以仅加载页面的实际内容没有看到整个页面刷新就无缝更改？

例如，每次视觉变化的页面部分都在<section class="home"></section>标签内

【问题讨论】：

您想做单页应用程序 (SPA) 之类的事情吗？
@MohamedElKalioby nope，我有多个应用程序页面，但导航栏没有改变，每次加载页面时看到它闪烁是很糟糕的

标签： python html django ajax

【解决方案1】：

使用 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

【讨论】：

您确定代码正确吗？ load_page 出现未解决的函数错误
见编辑，我忘了在load_page函数前加function关键字
为了清楚起见，navitem1 是占位符还是我需要更改代码中的某些内容？而且，我是否需要为导航栏上的每个项目创建一个return JsonResponse，并使用它们指向的正确 URL？