javascript - 在buttonclick上将几个模板加载到django中的基本模板中
问题描述
我有几个应用程序(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 代码后解释它?或者这里是“包含”错误的方法吗?
解决方案
实际上,Django 模板适用于无状态的 HTTP 协议。这意味着您一旦渲染它就无法获取其他模板!但是,您可以使用 ajax 请求从您的 web 应用程序中获取 django 模板。
推荐阅读
- node.js - JWT-Node 身份验证 - req.headers[''authorization"] 未定义
- reactjs - 盖茨比有缓慢的交互和延迟响应
- python - 在评估 GPT2 模型时计算损失和困惑,即使没有定义
- c# - 如何修复仅在某些计算机上发生的 NullReferenceException
- javascript - 如何过滤javascript中嵌套数组中存在的对象数组
- reactjs - 需要像 soundcloud react-native 这样的音频进度条
- assembly - 如何通过增加和减少单个字节来修改光标下radare2中的机器代码?
- wso2 - 用户禁用通知在带有 PostgreSQL 的 WSO2 5.9 身份服务器中不起作用
- jena - TDB2Factory 连接数据集
- angular - Threejs:用开始半径和结束半径绘制弯头