如何使用模板 jinja Flask 动态加载 ajax Bootstrap 选项卡？答案

【问题标题】：How to load ajax Bootstrap tabs dinamically with template jinja Flask?如何使用模板 jinja Flask 动态加载 ajax Bootstrap 选项卡？
【发布时间】：2016-04-14 22:16:29
【问题描述】：

我需要从数据库加载数据来创建菜单，如何将数据传递给 Ajax 请求，需要 Ajax 请求吗？当我单击菜单时，将仅加载在选项卡窗格中单击的链接，而不是全部 3 个，我没有找到有关此特定主题的任何信息：

 <ul class="nav nav-tabs">
 <li class="active"><a href="#home">Home</a></li>
 <li><a href="#menu1">Menu 1</a></li>
 <li><a href="#menu2">Menu 2</a></li>
 <li><a href="#menu3">Menu 3</a></li>
 </ul>

<div class="tab-content">
<div id="home" class="tab-pane fade in active">
  <h3>HOME</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="menu1" class="tab-pane fade">
  <h3>Menu 1</h3>
  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>

以 php 为例：

Dynamic Bootstrap Tabs using PHP/MySQL

http://www.99logic.com/how-to-create-dynamic-tab-using-ajax-jquery-in-php/

【问题讨论】：

标签： ajax flask-sqlalchemy

【解决方案1】：

这与您引用的 PHP 链接的工作方式几乎相同，因为它主要是客户端解决方案。

在浏览器中加载的基本页面需要具有整体的标签结构。在此页面中，您必须处理选项卡的点击事件。在每个选项卡的单击处理程序上，您将发出一个 ajax 调用以从服务器检索相应的 HTML。例如，这些端点的 URL 可以是 /menu1、/menu2 等。 Flask 服务器定义这些端点并返回其中每个选项卡的内容。如果您愿意，可以将这些定义为 Jinja2 模板。客户端中的 Ajax 请求将有一个完成回调，在那里您将获取来自请求的 HTML 并将其插入选项卡的正文中。对于除了服务器端端点之外的所有内容，您都可以从 PHP 解决方案中获取代码，它们应该都可以正常工作。

希望这会有所帮助！

【讨论】：

你有 Python 代码的例子吗？我如何处理数据？这是一个JSON？我如何上交 JSON？我将拥有一个 HTML 和一百个内容，它们会发生变化。
Python 端将是一个正常的请求，它将返回一个带有标签页 HTML 内容的渲染模板。我不会为此使用 JSON，只返回 HTML。 JS端可以把HTML内容直接附加到标签页上。
谢谢，回复晚了。