Question

我有几个应用程序（app1.html，app2.html等）和一个base.html（具有4个占位符）。现在，我想通过单击其中一个占位符来启用用户，以从这些应用程序中进行选择并将它们加载到该占位符中。这是一个使用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代码后解释这一点？还是“包含”错误的方法？

Answer 1

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

在buttonclick上将几个模板加载到Django的基本模板中

1 个答案: