在按钮单击时将几个模板加载到 django 中的基本模板中答案

【问题标题】：Load several templates into a base template in django on buttonclick在按钮单击时将几个模板加载到 django 中的基本模板中
【发布时间】：2019-07-16 09:05:35
【问题描述】：

我有几个应用程序（app1.html、app2.html 等）和一个具有（假设）4 个占位符的 base.html。现在我想通过单击占位符之一来启用用户以从这些应用程序中进行选择并将它们加载到该占位符中。为了更清楚，这里有一个简单的 js 示例：https://jsfiddle.net/eja4t0gb/15/

HTML:

  <body>
    <div id="module-1" class="">
      This is module 1.
      <button id="load-1">Load Module</button>
    </div>
    ---
    <div id="module-2" class="">
      This is module 2.
      <button id="load-2">Load Module</button>
    </div>
    ---
    <div id="module-3" class="">
      This is module 3.
      <button id="load-3">Load Module</button>
    </div>
    ---
    <div id="module-4" class="">
      This is module 4.
      <button id="load-4">Load Module</button>
    </div>
    --- ---
    <div id="chooser">
      Choose an App.
      <button id="app-1">App-1</button>
      <button id="app-2">App-2</button>
      <button id="app-3">App-3</button>
      <button id="app-4">App-4</button>
    </div>
  </body>
</html>

Javascript：

var chosenModule = null;
document.getElementById("chooser").style.display = "none";

for (let i = 1; i <= 4; i++) {
  document.getElementById("load-" + i).addEventListener("click",
    function() {
      chosenModule = i;
      document.getElementById("chooser").style.display = "block";
    });
}

for (let i = 1; i <= 4; i++) {
  document.getElementById("app-" + i).addEventListener("click",
    function() {
      loadApp(i);
      document.getElementById("chooser").style.display = "none";
      document.getElementById("app-" + i).style.display = "none";
    });
}

function loadApp(i) {
  document.getElementById('module-' + chosenModule).innerHTML = "App" + i;
}

这是我的问题：我将如何使用 django 模板/Jinja2 实现这一点？

现在我看到了这个帖子：Django: Loading another template on click of a button，但是，目标是加载一个全新的页面。另一方面，我希望仅在单击按钮后才额外加载应用程序及其所有资源，而无需重新加载页面本身。我知道 {% include 'app.html' %}，但我如何告诉 base.html 仅在单击按钮/通过 js 代码后解释它？或者这里是“包含”错误的方法吗？

【问题讨论】：

标签： javascript django templates jinja2

【解决方案1】：

实际上，Django 模板工作在 无状态 的 HTTP 协议上。这意味着您一旦渲染它就无法获取其他模板！但是，您可以使用 ajax 请求从您的 webapp 获取 django 模板。

【讨论】：

非常感谢您的回复！你碰巧知道我可以看看关于这个问题的任何好的例子吗？或者给一个简单的？我发现的唯一教程不获取模板，而是将用户输入与数据库中的数据进行比较。
好的，您可以找到Jquery + Django rest API from here 的示例博客。它将找出符合您要求的基本概念