Question

我正在使用Flask和Flask-WTForms开发一个问答Web应用程序。问题可以有1到5个标签，我为用户创建了一个标签编辑器来输入他们的标签：

我编写了JavaScript代码来将标记序列化为数组。因此，在上面的图片中，该数组看起来像这样：["tag1","tag2"]，当添加tag3时，它看起来像这样：["tag1","tag2","tag3"]。

我需要一种方法来获取Flask视图函数的标记名列表，但我无法弄清楚如何做到这一点。任何帮助将不胜感激。

表格：

class AskQuestionForm(Form):
    title = StringField('Title', validators=[Required(), Length(min=15, max=200)])
    content = TextAreaField('Content', validators=[Required(), Length(min=50, max=30000)])

    submit = SubmitField('Submit')

查看功能：

@main.route('/ask/', methods=['GET', 'POST'])
def ask_question():
    form = AskQuestionForm()
    if form.validate_on_submit():
        # Code to add a new question
    else:
        return render_template('ask.html', form=form)

模板（简化）：

<form id="ask-question-form" method="post" action="{{ url_for('main.ask_question') }}">
    {{ form.csrf_token }}

    <label for="title">Title</label>
    <input type="text" name="title" id="title">

    <label for="content">Content</label>
    <textarea name="content" id="content"></textarea>

    <label for="tags">Tags</label>
    <input type="text" name="tags" id="add-tag-input">
    <span>
        <button id="add-tag-button" type="button">Add</button>
    </span>

    <button type="submit">Submit question</button>
</form>

如何获取Flask视图功能的标签列表？我们将不胜感激。

Answer 1

使用TagListField作为在wtforms documentation中创建自定义字段的示例。它将照顾你在这里尝试做什么。我稍微修改了它，因为在原始示例中，它们使用逗号分隔的标记字符串：

class TagListField(Field):
    widget = TextInput()

    def _value(self):
        if self.data:
            return u', '.join(self.data)
        else:
            return u''

    def process_formdata(self, valuelist):
        if valuelist:
            self.data = [x.strip() for x in valuelist[0].split(' ')]
        else:
            self.data = []

Answer 2

Burhan的回答是我解决方案的一部分，但这就是我必须做的事情：

我在表单中添加了一个隐藏字段，并保留了没有名称的标记输入，因此无法提交。
使用JavaScript，我拦截了表单提交，并将逗号分隔的标记名称列表放入隐藏字段。
我创建了一个TagListField，其process_formdata(self, valuelist)功能类似于上面显示的功能。
在我的Flask视图功能中，我检索了隐藏字段的值，然后继续使用它来制作新问题。

如果未来的读者对我的具体行为有任何疑问，请发表评论。

如何使用WTForms将HTML表单中的可变长度字符串列表添加到Flask中？

2 个答案: