與使用者互動是網頁的一個基本功能。而互動的方式基本就是接受使用者資訊并進行相應的回報。
表單就是最基本的接受使用者資訊的方式。
我先參考了《Flask Web Development》中對于Form的介紹。
它引入了一個flask-wtf的package(安裝指令pip install flask-wtf)。
在代碼中加入
from flask.ext.wtf import Form
from wtforms import StringField, SubmitField
from wtforms.validators import Required
class NameForm(Form):
name = StringField('What is your name?', validators=[Required()])
submit = SubmitField('Submit')
然後修改處理函數
@app.route('/', methods=['GET', 'POST'])
def index():
form = NameForm()
if form.validate_on_submit():
print form.name.data
form.name.data = ''
return render_template('index.html', form=form)
這裡NameForm是作為index.html的輸入參數。
再來看index.html是如何組織的:
{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}
{% block title %}Flasky{% endblock %}
{% block page_content %}
{{ wtf.quick_form(form) }}
{% endblock %}
在倒數第二行調用了輸入參數form來組織html中form的内容。再看之前的代碼form是NameForm的執行個體,NameForm有2個變量,name和submit,name應該是輸入文字的輸入框,submit應該送出的button。
運作代碼後看實際頁面,奇怪,怎麼是Internal Server Error,再看指令行傳回代碼,居然是500。
研究了好久,最後發現,需要添加一行
app.config['SECRET_KEY'] = 'any string'
這個是一個加密密鑰,長度和内容都可以随意設定。最初用于flask的cookies内容加密,後來被其他flask相關的第三方擴充。看來調用form的時候也需要加入這個東西。
加入之後再運作代碼,通路之後得到界面:
輸入任意名稱後,看到指令行中有列印輸入的内容:
這個方法有個問題,網頁的組合需要靠伺服器來執行,而且如果要加入javascrpt方法,又需要提前知道方法名稱,這樣整體看起來比較混亂。
那麼能否在HTML中組織form,伺服器程式隻負責接收和處理資料呢?
答案是肯定的。
這時就需要request中的資料。
我們先來組織網頁:
{% extends "base.html" %}
{% block title %}Flasky{% endblock %}
{% block page_content %}
<form name="input" method="POST">
target: <input type="text" name="_target" size="40">
<input type="submit" value="Submit">
</form>
{% endblock %}
這裡我們去掉了有關wtf的内容,加入了一個form
同時重新組織伺服器的處理函數:
@app.route('/', methods=['GET', 'POST'])
def index():
# form = NameForm()
# if form.validate_on_submit():
# print form.input_data.data
# form.input_data.data = ''
# return render_template("accept_target.html", form=form)
if request.method == "POST":
print request.form
return render_template("accept_target_without_form_variable.html")
這裡我們先看request.form中的内容
列印出來的内容是Dict,key是_target,内容是zzz
參看上面的form中内容,看來key是input的name。
列印内容zzz隻需要把print那一行修改為
print request.form['_target']
總結
這一次我們講了flask中的表單,有2種實作方式
1.調用flask-wtf package在伺服器程式中建立表單并作為參數傳遞給html檔案
2.直接在HTML中加入表單,在伺服器程式中通過request.form[form_input_name]來通路表單内容