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

Question

我正在使用： 蟒蛇 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>

有一个 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 方法的文档，我了解到我可以将第二个参数作为对象提交给 .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 函数将对象发送到您的烧瓶路由
• 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)