Flaskでページ上のセレクトボックスから選択された文字を使いたい

PythonのFlaskを用いて，Webページ上のセレクトボックスから選択された文字をFlaskのプログラム内で使用したいです．

今，世界の国をふたつ選んでその二国間の距離を表示するというWebページを作ろうとしています．

pythonでは，組み込みの関数として，国名を指定すると緯度経度を算出することのできる関数があり，これとFlaskを使用してふたつの国の距離を算出しようとしています．

距離を算出する関数は外部関数として作成でき，あとはその関数をimportして，ページ上のセレクトボックスから選択された国を引数に取ればいいと思っていたのですが，セレクトボックスからの入力を変数に代入する方法が調べてみてもよくわかりませんでした．

プログラムは下のようになっています．

# coding: utf-8
from flask import Flask, render_template, render_template, request, url_for
#import test2
app = Flask(__name__) #インスタンス生成

@app.route("/",methods=['GET','POST'])
def index():

   # city1 = request.form.get('Leave')
   # city2 = request.form.get('go')
    city1 = request.args.get("Leave", default="", type=str)
    city2 = request.args.get("go", default="", type=str)
    return render_template('index.html', ms = "")

@app.route("/result", methods=['POST']) #アプリケーション/indexにアクセスが合った場合
def result():

 #   dist = test2.calcRadiation().init(city1,city2)
    return render_template('result.html', ms = city1 )
#ここがサーバーサイドからクライアントサイドへなにかを渡すときのポイントになります。

if __name__ == "__main__":
    # webサーバー立ち上げ
    app.run(debug=True)

これをすると，最初のページには行くのですが，地名を選択していざ計算をするとページのエラーが出ます．
また，自作の関数をimportしようとすると，このimportの際にエラーが出ます，（そのためここではコメント化)，

エラーとしては

Method Not Allowed

The method is not allowed for the requested URL.

となっているのでHTTPメソッドが違うのかな？とも思っています．Flaskに明るい方，どうかよろしくお願いします．

追記
下はindex.htmlです

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Flght Radiation Simulator</title>
      <link rel="stylesheet" href="/static/apps.css">
    </head>
    <body>
        <h1>Flying Radiation Simulator</h1>
        <p><font size="5" face="Comic Sans MS">Please select Leaving & Going City <br><br></font></p>

	<!-- What's the Flying Radiation Simulater? </font></p> -->

    <div class="small-5 medium-4 columns padding-left-none">
    <select class="Leaving City" id="fromCity" name="Leave">

	<option selected="selected" value="">Leaving Country</option>
	<!--<select name="country">-->
<option value="">Country...</option>
<option value="Afganistan">Afghanistan</option>
...
...
<option value="Yemen">Yemen</option>
<option value="Zaire">Zaire</option>
<option value="Zambia">Zambia</option>
<option value="Zimbabwe">Zimbabwe</option>
</select>
    </select>
        </div>
    </div>

<div id="returnContent">
    <div class="small-7 medium-8 columns padding-right-none">
    <div class="input-group input-group-custom">
    <span class="input-group-label input-group-label-blue">

    <div class="small-5 medium-4 columns padding-left-none">
    <select class="input-group-field" id="fromTime" name="go">

	<option selected="selected" value="">Going Country</option>
	<!--<select name="country">-->
<option value="">Country...</option>
<option value="Afganistan">Afghanistan</option>
...
...
<option value="Zambia">Zambia</option>
<option value="Zimbabwe">Zimbabwe</option>
</select>
    </select>
        </div>
    </div>
    </select>
        </div>
	</div>

        <p><font size="5" face="Comic Sans MS">
	Result!

	{{ ms }} mSv
	</font></p>

	<p>
	<input type="button" value="Calclate!" onclick="location.href='http://127.0.0.1:5000/result'">

        <p><font size="5" face="Comic Sans MS">What's the Flying Radiation Simulater? <br><br>
	   This tool calculates sky’s radiation dose from collected dates.<br> You can select safe trajectory from calculated results. This tool protects your health from radiation in flight.
	 </font></p>

    </body>
</html>

以下はresult.htmlです

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Flight Radiation Simulator</title>
    </head>
    <body>
        <h1>Flight Radiation Simulator</h1>
        <p><font size="5" face="Comic Sans MS">Please select Leaving & Going City <br><br></font></p>

	<!-- What's the Flight Radiation Simulater? </font></p> -->

    <div class="small-5 medium-4 columns padding-left-none">
    <select class="Leaving City" id="fromCity" name="LeaveCityform">

	<option selected="selected" value="">Leaving Country</option>
	<!--<select name="country">-->
<option value="">Country...</option>
<option value="Afganistan">Afghanistan</option>
...
...
<option value="Yemen">Yemen</option>
<option value="Zaire">Zaire</option>
<option value="Zambia">Zambia</option>
<option value="Zimbabwe">Zimbabwe</option>
</select>
    </select>
        </div>
    </div>

<div id="returnContent">
    <div class="small-7 medium-8 columns padding-right-none">
    <div class="input-group input-group-custom">
    <span class="input-group-label input-group-label-blue">

    <div class="small-5 medium-4 columns padding-left-none">
    <select class="input-group-field" id="fromTime" name="goDepartureTime">

	<option selected="selected" value="">Going Country</option>
	<!--<select name="country">-->
<option value="">Country...</option>
<option value="Afganistan">Afghanistan</option>
...
...
<option value="Zambia">Zambia</option>
<option value="Zimbabwe">Zimbabwe</option>
</select>
    </select>
        </div>
    </div>
    </select>
        </div>
	</div>

        <p><font size="5" face="Comic Sans MS"></p>
	Result!

	{{ ms }} mSv
	</font></p>


        <p><font size="5" face="Comic Sans MS">What's the Flying Radiation Simulater? <br><br>
	   This tool calculates cosmic radiation dose from collected dates.<br> You can select safe trajectory from calculated results. This tool protects your health from radiation in flight.
	 </font></p>

    </body>
</html>

miyahan

2017/05/03 12:39

なんだかハチャメチャでよくわからないのですが、とりあえずテンプレートファイル（index.html、result.html）を乗せられますか？

行動規範の内容に同意します

回答1件

Method Not Allowed (405エラー) になるのは、index.html の "Calclate!" のボタンで http://127.0.0.1:5000/result へ GETメソッド でリクエストさせているのに、Flask 側が @app.route("/result", methods=['POST']) と POSTメソッド しか許可しておらず、ミスマッチを起こしているのが原因です。

それならばと @app.route("/result", methods=['GET', 'POST']) にしてGETメソッドを許可したとしてもアプリケーションは動きません。そもそもフォームが機能していないからです。これはHTMLの基礎知識の範囲ですので、別途学習してください。

ただフォームは作るのが面倒な上に、入力値の厳格なチェックが必要で、ひとつのチェック漏れが重大なセキュリティ事故につながります。Python には WTForms というフォームの生成・バリデーションを行ってくれる便利なライブラリがあります。ぜひ導入を検討してください。Flask WTForms あたりでググれば使い方がでてくるはずです。

投稿2017/05/03 14:23

miyahan

総合スコア3095