By Rose Ou

更新日期:

文章目录
  1. 1. 表单渲染
  2. 2. 在视图函数中处理表单

表单渲染

在上一节中，我们定义了一个Web表单了，那么现在我们就来将这个表单渲染成HTML，在模板中生成出来看看。

修改index.html如下：

1
2
3
4
5
6
7
8
9
10
{% block page_content %}
<div class="page-header">
    <h1>Hello, {% if name %}{{ name }}{% else %}Stranger{% endif %}</h1>
</div>
<form method="POST">
    {{ form.hidden_tag() }}
    {{ form.name.label }} {{ form.name() }}
    {{ form.submit() }}
</form>
{% endblock %}

1.首先修改了主页头部所显示的欢迎消息，当我们给name传入值时，就把这个值传入并返回出来，当我们没有给name传入值，就返回Hello，Stranger！
2.这里设置了一个参数form，NameForm表单类的实例将会通过这个参数传入模板，从而在模板中生成这个表单。
3.method=”POST”说明提交表单使用的是POST方法。
4.hidden_tag()是Form类中的一个方法，它在一个隐藏的DIV标签中渲染任何隐藏的字段（包括CSRF字段）。
5.form.name.label表示调用所传入的表单实例中name字段的第一个参数值字符串。如果我们传入了NameForm表单类的实例，这里就会显示”What is your name?”。
6.form.name()表示调用所传入的表单实例中的name字段。如果我们传入了NameForm表单类的实例，这里就会显示一个输入文本框。
7.form.submit()表示调用所传入的表单实例中的submit字段。如果我们传入了NameForm表单类的实例，这里就会显示一个提交按钮，用来提交表单。

这样子，就能把表单渲染出来了。但是要成功显示表单，还需要修改视图函数。

在视图函数中处理表单

视图函数index()不仅要渲染表单，还要接受表单中的数据。修改hello.py如下：

1
2
3
4
5
6
7
8
@app.route('/', methods=['GET', 'POST'])
def index():
    name = None
    form = NameForm()
    if form.validate_on_submit():
        name = form.name.data
        form.name.data = ''
    return render_template('index.html', form=form, name=name)

1.首先，在app.toute()中添加一个methods参数，并指定‘GET’和‘POST’。说明在URL映射中把这个视图函数注册为GET和POST请求的处理程序(即该路由可处理‘GET’和‘POST’请求)。如果methods参数没有指定，则默认把该视图函数注册为GET请求的处理程序。
2.接下来设置了一个局部变量name，用来存放在表单中输入的名字，当没有输入时，其默认值为None。
3.然后创建一个NameForm实例，它叫form，用来表示表单。
4.接下来的validate_on_submit()是NameForm表单类中的一个方法。提交表单后，如果输入表单的数据可被所有验证函数接受，那么validate_on_submit()方法就返回True，否则返回False。这决定了程序是处理表单提交的数据还是重新渲染表单。
5.在这里，如果用户是第一次访问该程序，服务器就会收到一个没有表单数据的GET请求，那么这时validate_on_submit()将返回False。if条件语句的内容将全部跳过，直接调用render_templat()渲染index.html模板，同时将NameForm的实例form作为值传入给index.html中的form参数，显示出表单，并将这里name参数的值None传入给index.html中的name参数。所以我们首次打开该网站就会看到浏览器显示了一个表单。
6.当用户提交表单，服务器就会收到一个包含着表单数据的POST请求。这时validate_on_submit()方法会调用表单form中的name字段上附属的Required()验证函数。如果没有在表单中输入数据，validate_on_submit()方法仍然返回False，从而重复上一步骤。如果表单数据不为空，validate_on_submit()方法就返回True。
7.当validate_on_submit()方法返回True，就执行接下来的if语句。StringField中有一个data属性，可用于获取输入表单中的数据。于是这里通过form中的name字段中的data属性获取用户输入表单中的名字，并将其赋值给局部变量name。
8.赋值完毕后，再将data属性的值设置为空字符串，从而清空表单的name字段。
9.最后，渲染模板，同时将NameForm的实例form作为值传入给index.html中的form参数，将name参数的值传入给index.html中的name参数。这一次name参数的值将不再是None，而是用户所输入的名字。

接下来我们来看看这个表单长什么样子吧。运行程序，访问http://127.0.0.1:5000/ ：

这是用户首次访问网站是浏览器所显示的表单。当用户在表单中输入名字rose，并按Submit按钮提交表单，就可看到：

这时就显示了一个针对用户rose的欢迎消息。

而如果我们没有输入名字就直接按提交按钮，将会重新渲染表单。

Last：
Next：

文章目录
  1. 1. 表单渲染
  2. 2. 在视图函数中处理表单