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で確認するには、{% 条件節 %}というフォーマットで記入してあげます。

また、実際の値を反映する場合は、{{ 入力したい値 }}のように入力します。 ここまでの流れを一度振りかえりましょう。

1. HTMLで特定の値を入れて、POSTリクエストを送る
2. Flask上で、ルーティング（URL）とHTTPリクエスト（GET・POST）に合致した関数を実行する
3. 関数を処理した後に、特定のHTMLに特定の値を送信する
4. HTMLに関数から送信された値を取得し、反映する

ここまでの流れを実際に反映されているかどうか、確認してみましょう。

$  python app.py

を実行し、さきほどのフォーム入力画面をひらき、実際に値を入力してみます。そして、送信をクリックしたら、再度ページが遷移するかと思います。その時に、一度入力したデータがHTML上に反映されていれば完了です。