發送值的列表在jQuery來瓶模板

Question

我使用： 的Python 3.4 瓶10.1 SQLAlchemy的0.9.6 的JQuery 2.1.1

我工作在一個論壇上的應用程序，將顯示一個表基於用戶選擇的標籤的論壇主題。這些標籤是按照以下Jinja2模板生成的開/關按鈕列表。 （應該是8個左右，最多16個標籤）。

<UL class="ForumTagList"> 
    {% for Tag in Forum.ForumTags.filter_by(Visible=True): %} 
     <li Class="ForumTag VisibleTrue" id ="liTag{{Tag.TagID}}" > 
      <input id="{{Tag.TagID}}" type="hidden" value="1" name="Name{{Tag.TagID}}"></input> 
     <DIV class="Tag{{Tag.TagID}}" onclick="toggle_tag('{{Tag.TagID}}');"> {{Tag.Name}}</DIV> 
     </li> 
    {% endfor %} 
</UL> 

有管理該值的改變爲0或1

該表將通過AJAX調用按如下被裝載JS腳本。它最初將加載一個未排序的表，但用戶將能夠刷新以查看是否顯示新線程。

<script type="text/javascript"> 
    $(document).ready(function(){ 
     ThreadTableRefresh(); 
    }); 

    function ThreadTableRefresh(){ 
     $('#ThreadsHolder').load('{{Forum.ForumID}}/ForumThreads'); 
    } 
</script> 
<div id="ThreadsHolder"> 
</div> 

我從JQuerys閱讀文檔Load方法，我可以提交一個第二個參數.load（）方法作爲一個對象理解。我希望提交來自用戶選擇的開/關值，然後將用它來生成僅顯示用戶想要的標籤的表格。

我對HTML和JQuery非常陌生，任何人都可以指出我正確的方向：如何從這些HTML控件獲取各種值並將它們作爲列表或字典發佈到Flask模板？

如果您需要任何補充信息，請讓我知道。

Answer 1

您可以發送字典或JSON到燒瓶模板。對於每個TagID，存在1或0值，例如{1：0,2：0,3：1,4：0}。

檢出.ajax jquery函數發送一個json對象到你的瓶頸路線。這應該讓你開始。

循序漸進：

• 單擊刷新按鈕
• 每個標籤的ID和切換（1/0）值添加到字典
• 轉換字典的JSON對象
• 使用ajax函數將對象發送到您的燒瓶路由
• 燒瓶路由取值，發回新的html數據
• 的AJAX功能將在成功

的Javascript

$('#refresh-button').click(function() { //selector for refresh button 

    data = {} 

    $('input').each(function(){   //might need more specific selector 
     id = $(this).attr('id') 
     toggle = $(this).val() 
     data[id] = toggle 
    }); 

    data = JSON.stringify(data); 

    $.ajax({ 
     url: '/YourFlaskRoute' 
     type: 'POST', 
     data: data, 
     contentType: 'application/json;charset=UTF-8', 
     cache:false, 
     success: function (response) { 
      $(".ForumTagList").html(response); //your flask route needs to send back the html for just your list items 
     }, 
     error: function(response){ 
      alert('Error refreshing forum items') 
     } 
    }); 

}); 

瓶

@myblueprint.route('/YourFlaskRoute', methods = ['POST']) 
def refresh_tags(): 
    if request.method == 'POST': 
     data = request.json 

     #access your data 
     for key, value in data.items(): 
      key = id 
      value = id 

     # run your query 
     tags = ... 

     #send back your list items template 
     return render_template('list_items.html', tags = tags)