FlaskでHTMLの情報を受け取ろう
HTMLから入力した値を、Flask上で受け取ろう
解説部分
さて、さきほどformを作成しました。POSTリクエスト（フォームの値送信時）と、ただそのページにアクセスしたGETリクエストの時で、処理をかえます。それがこちらのコードです。
@app.route('/', methods = ["GET" , "POST"])
def index():
if request.method == 'POST':
return render_template('index.html')
else:
return render_template('index.html')
変わった点としては、methodsにリスト形式でGETとPOSTが追加されたのと、条件分岐でPOSTリクエストが送られたときの値が増えました。 さて、最初にルーティングの章で学びましたが、同じindex.htmlでも、ただページにアクセスするGETと、ツイッターIDを送信するPOSTの場合があります。 form上でPOSTを送信する場合は、ただ表示するのではなく、今後ツイッターIDをもとにRT数やいいね数を取得して、その内容をindex.htmlに反映するので、別の処理を行うことになります。そこで、POSTリクエストの処理を加えてあげるわけですね。
送信したuser_idを受け取る
フォームから送信した値を受け取りましょう。HTML上では、nameでuser_idと指定したので、その値を受け取るには以下のコードになります。これで、HTMLから送信した際のuser_idを取得することができます。 この取得したuser_idを、HTML上に反映する場合は、この受け取った値をindex.htmlに返してあげることができます。それがこちらのコードです。
@app.route('/', methods = ["GET" , "POST"])
def index():
if request.method == 'POST':
user_id = request.form['user_id'] # formのname = "user_id"を取得
return render_template('index.html', user_id = user_id)
else:
return render_template('index.html')
順に解説していこうと思います。まず、このコードで、HTTPのPOSTリクエストが送られた時を条件にします。
if request.method == 'POST':
そして、今度はHTMLから受け取った値を、python上で取得します。
user_id = request.form['user_id'] # formのname = "user_id"を取得
そのユーザーIDを、再度HTMLに反映するには、以下のコードを実行する必要があります。
return render_template('index.html', user_id = user_id)
これで、以下の処理を実行することができます。
さて、今HTML上にデータが送信されました。この送信したデータを、受け取れるようにしましょう。index.htmlをひらき、以下のコードを追加します。
<!-- コードを追加 -->
{% if user_id %}
<p>{{user_id}}</p>
{% endif %}
<!-------------------->
<form class="form-inline" method="post">
<div class="form-group">
<label class="sr-only" for="user_id"></label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input id="user_id" name="user_id" placeholder="ここにツイッターのIDを入力してください。" type="text" class="form-control">
</div>
</div>
<button type="submit" class="btn btn-primary">取得する</button>
</form>
最初に、index関数から送信した値の引数のデータが存在するかを確認します。Flask上のデータをHTMLで確認するには、{% 条件節 %}というフォーマットで記入してあげます。
また、実際の値を反映する場合は、{{ 入力したい値 }}のように入力します。 ここまでの流れを一度振りかえりましょう。
- HTMLで特定の値を入れて、POSTリクエストを送る
- Flask上で、ルーティング（URL）とHTTPリクエスト（GET・POST）に合致した関数を実行する
- 関数を処理した後に、特定のHTMLに特定の値を送信する
- HTMLに関数から送信された値を取得し、反映する
ここまでの流れを実際に反映されているかどうか、確認してみましょう。
$ python app.py
を実行し、さきほどのフォーム入力画面をひらき、実際に値を入力してみます。そして、送信をクリックしたら、再度ページが遷移するかと思います。その時に、一度入力したデータがHTML上に反映されていれば完了です。