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

Question

我正在使用:Python 3.4 flask 10.1SQLAlchemy 0.9.6JQuery 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>

我通过阅读有关 JQuery 的文档了解到 Load我可以将第二个参数作为对象提交给 .load() 方法的方法。我希望提交用户选择的开/关值，然后将用于生成仅显示用户想要的标签的表格。

我是 HTML 和 JQuery 的新手，有人能给我指明正确的方向，告诉我如何从这些 HTML 控件中获取各种值并将它们作为列表或字典发布到 Flask 模板吗？

如果您需要任何其他信息，请告诉我。

Answer 1

您可以将字典或 json 发送到您的 flask 模板。对于每个 TagID，都有一个 1 或 0 值，例如{1:0、2:0、3:1、4:0}。

查看 .ajax jquery 函数以将 json 对象发送到您的 flask 路由。这应该让你开始。

一步一步:

• 点击刷新按钮
• 对于每个标签，将 id 和 toggle (1/0) 值添加到字典中
• 将字典转换为json对象
• 使用ajax函数将对象发送到你的flask路由
• 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')
        }
    });

});

flask

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