将数据从文本框传递到 wtform 并在浏览器中显示

Question

已编辑。我原来的问题不够清楚。我想允许用户将值传递到 wtforms 中的 TextField，然后他们输入的值在添加后出现。这将允许用户在对最初输入的所有值点击最终 "Sumbit" 按钮之前传递多个值。

我发现 this question 对输入的文本进行了一些处理，这是我尝试过的。

我的Python代码：

from flask import Flask, request, render_template, redirect
from wtforms import TextField, Form, SubmitField


def redirect_url(default='index'):
    return request.args.get('next') or \
           request.referrer or \
           url_for(default)


class RegionForm(Form):
    field = TextField('Region')
    Submit = SubmitField('AddRegion')
    fieldList = []


def main():
    app = Flask(__name__)

    @app.route('/region/', methods=['GET'])
    def region():
        form = RegionForm(request.form)

        return render_template("region.html",
                               form=form)


    @app.route('/add/', methods=['POST'])
    def add():
        request.form['fieldList'].append(request.form['field'])
        return redirect(redirect_url())

    app.run(debug=True)

我的html代码：

<form action="/add/" method="Post">
{% for field in form %}
    <tr>
        <th>{{ field.label }}</th>
        <td>{{ field }}</td>
    </tr>
{% endfor %}
</form>
{% for item in form.fieldList %}
    {{ item }}
{% endfor %}

但在我输入文本并单击 "AddRegion" 按钮后，出现以下错误： The browser (or proxy) sent a request that this server could not understand. 但是，如果我注释掉 request.form['fieldList'].append(request.form['field']) 行，则会发生重定向，但文本尚未添加到表单的隐藏列表中。如何将文本添加并重定向 返回到原始页面，以便用户可以添加更多文本？似乎只有这一行有错误，因为其余的工作正常。

如何让用户动态地向字段中添加文本，然后在浏览器中显示该字段？然后一旦添加了完整的区域字段，我希望能够检索该列表以便稍后在单独的函数中处理。

Answer 1

第一部分

所以看了你的代码后，我想我发现了你的问题。 Flask 对其应用程序路由非常讲究。

您的 flask 中的应用程序路径是：

@app.route('/add', methods=['POST'])

但是，您当前对表单的操作是： <form action="/add/" method="Post">

在flask中/add和/add/实际上是两个不同的web-routes。因此，@app.route 没有被触发。如果您将代码更改为：

`<form action="/add" method="post">`

你应该可以从这里开始了。

第二部分

我想我可能还有一个问题。所以现在在你的 HTML 中，你实际上在循环浏览 fieldList.

中的项目之前关闭你的 </form> 标签

</form> {% for item in form.fieldList %} {{ item }} {% endfor %}

尝试：

{% for item in form.fieldList %} {{ item }} {% endfor %} </form>

我认为正在发生的事情是您的表单输入实际上并未放置在表单内部，因此当您尝试访问它们时，您会收到 KeyError。

Answer 2

我支持 Cody Myers 所说的。然而，有一种简单的方法可以保证正确的路由，即使您稍后更改它们：在您的表单中使用action="{{ url_for('region') }}"，Flask 将自动用正确的路由替换给定的函数名称。

将数据从文本框传递到 wtform 并在浏览器中显示

Pass data from textbox to wtform & display in browser

html

python

flask

wtforms