ajaxブートストラップタブをテンプレートと一緒にdinamicallyロードする方法jinja Flask？

Question

データベースからデータをロードしてメニューを作成する必要があります。データをAjaxリクエストに渡すにはどうすればいいですか？Ajaxリクエストが必要ですか？

：PHPで

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

例：私はメニューのをクリックすると、タブのウィンドウではなく、すべて3でクリックしただけでリンクをロードします、私はこの特定のテーマについては何も見つかりませんでした

Dynamic Bootstrap Tabs using PHP/MySQL

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

Answer 1

これは、主にクライアント側のソリューションであるため、PHPは、あなたが参照リンクと同じようにほとんどの作品。

ブラウザに読み込まれる基本ページには、全体的なタブ構造が必要です。このページでは、タブへのクリックイベントを処理する必要があります。各タブのクリックハンドラで、ajax呼び出しを発行して対応するHTMLをサーバーから取得します。これらのエンドポイントのURLは、たとえば/menu1,/menu2などとすることができます。 Flaskサーバーはこれらのエンドポイントを定義し、それらの各タブの内容を返します。必要に応じて、これらをJinja2テンプレートとして定義することができます。クライアントのAjaxリクエストには補完コールバックがあり、そこにはリクエストから来たHTMLを受け取り、それをタブの本体に挿入します。サーバー側のエンドポイントを除くすべての場合、PHPソリューションからコードを取得することができます。そのコードはすべて同じになるはずです。

希望すると便利です。