将Jquery中的值列表发送到flask模板

Question

我正在使用:Python 3.4 Flask 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>

有一个JS脚本可以管理将值更改为0或1.

该表将通过AJAX调用加载,如下所示.它最初将加载未排序的表,但用户将能够刷新以查看是否出现新线程.

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

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

我从阅读JQuerys Load Method 的文档中了解到,我可以将.load ()方法的第二个参数作为对象提交.我希望从用户选择中提交开/关值,然后将其用于生成仅显示用户想要的标签的表.

我是HTML和JQuery的新手,是否有人能够指出我如何从这些HTML控件中获取各种值并将它们作为列表或字典发布到Flask模板？

如果您需要任何其他信息,请告诉我.

Answer 1

您可以将字典或json发送到烧瓶模板.对于每个TagID,存在1或0值,例如{1:0,2:0,3:1,4:0}.

查看.ajax jquery函数,将json对象发送到烧瓶路径.这应该让你开始.

一步步:

• 单击刷新按钮
• 对于每个标记,将id和toggle(1/0)值添加到字典中
• 将字典转换为json对象
• 使用ajax函数将对象发送到您的烧瓶路径
• flask路由获取值,发回新的html数据
• ajax函数将在成功时替换新的html

使用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)