时间戳

首页 > 解决方案 > 如何从 HTML 模板返回列表到 Python Flask 应用程序

python - 如何从 HTML 模板返回列表到 Python Flask 应用程序

问题描述

我是 Python Flask 的新手。我想更新 HTML 模板中的列表并将其返回给 Python Flask 应用程序。到目前为止，我将列表从烧瓶应用程序发送到 HTML 模板并显示它。

烧瓶应用程序：

return render_template('er_draw.html', relationship_data=relationship_data)

HTML 模板：

{% for data in relationship_data %}

    <div class="form-row">

        <div class="form-group col-md-2">
            <input type="text" placeholder="{{ data['entity1'] }}">
        </div>
        <div class="form-group col-md-2">
            <input type="text" placeholder="{{ data['entity2'] }}">
        </div>
        <div class="form-group col-md-2">
            <input type="text" placeholder="{{ data['relationship'] }}">
        </div>
        <div class="form-group col-md-2">
            <select id="inputState" class="form-control">
                {% if data['cardinality'] == 'one_to_one' %}
                    <option selected>One to One</option>
                {% else %}
                    <option>One to One</option>
                {% endif %}
                {% if data['cardinality'] == 'one_to_many' %}
                    <option selected>One to Many</option>
                {% else %}
                    <option>One to Many</option>
                {% endif %}
                {% if data['cardinality'] == 'many_to_many' %}
                    <option selected>Many to Many</option>
                {% else %}
                    <option>Many to Many</option>
                {% endif %}
            </select>
        </div>
        <div class="col-auto">
            <a href="#">
                <button type="submit" class="btn btn-primary mb-2" name="submit_button" id="update_list"
                        value="update_list">Update
                </button>
            </a>
        </div>
        <div class="col-auto">
            <button type="submit" class="btn btn-primary mb-2" name="submit_button" value="delete_item">Delete
            </button>
        </div>
    </div>
{% endfor %}

输出：

当我单击更新按钮时，我想更新relationship_data列表并将其返回给 Flask 应用程序。为了实现这一点，我编写了 AJAX 请求代码（但我对此并不清楚）。

    <script>
    let relationship_data;
    $.ajax({
    url: "/list_change",
    type: "POST",
    contentType: "application/json;charset=UTF-8",
    dataType: "json",
    data: JSON.stringify({html_data: relationship_data}),
    success: function(response) {
        console.log(response);
    },
});
</script>

我在 Flask 应用程序中创建了一个新端点。

@app.route('/list_change', methods=['POST'])
def list_change():
    if request.method == 'POST':
        if request.form['submit_btn'] == 'update_list':
            data = request.get_json()
            print(data['html_data'])

但是，我不知道如何在 Javascript 中访问 relationship_data 列表有什么方法可以做到这一点吗？

标签： pythonflask

解决方案

上下文：Flask 使用 Jinja 来从您的代码表示的 HTML 模板生成您的页面。因此，您的应用程序屏幕截图是已经渲染的页面，它从 Flask 提供的数据中填充了 {% variable}。从渲染点开始，页面的行为就像一个通常的“网页”。

对问题的回答：您有不同的选择来实现您想要的目标。例如，您可以为按下按钮实现相应的 javascript 函数。此函数生成一个 Ajax 请求，该请求将发送到 Flask 应用程序的新“端点”（您需要自己指定端点）。此端点处理信息（根据您的目的更新 relationship_data）并将其发回。然后，javascript 函数处理接收到的信息并使用新内容更新您的页面。简而言之，除了 Flask 的设置要求之外，您还可以混合使用 javascript 实现

推荐阅读