雑多な技術系メモ

自分用のメモ。内容は保証しません。よろしくお願いします。

トップ > flask > 【ajax, flask】flaskのアプリケーションでajax通信を行うサンプル

【ajax, flask】flaskのアプリケーションでajax通信を行うサンプル

flask ajax python

ajax通信でget送信をし、結果を受け取る簡単なサンプルコードを紹介します。

ディレクトリ構成は以下のようになってます。
(javascriptのファイルはhtmlに書いちゃってます)

├── app.py
└── templates
    └── index.html

html

まずhtml側のコード。

<html>
  <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

    <script  type="text/javascript">
      function test_ajax(){
        var value = document.getElementById("value").value;
        // 以下のコードでajax通信を行う
        $.ajax({ 
          type:"GET", 
          url:"/test_ajax/",
          data:{
            value:value , 
          }, 
        })
          .done(function(data, text, jq){
            $('#result').html(data["result"]);
          });
      }
    </script>
  </head>

  <body>
    <div>
      <div id="results">
        <input id="value" type="text" value="5">
        <button id="calc", onClick="test_ajax()">送信</button> <br>
        結果：<span id="result"></span>
      </div> 
    </div>
  </body>
</html>

入力された数値をサーバー側に送信して、
返却された値を表示します。
$ajaxの部分がajax通信の部分です。
done以下でサーバーから返却された値を表示します。

flaskのコード

次のflask側のコード。

from flask import *

app = Flask(__name__)


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


@app.route("/test_ajax/", methods=["GET", "POST"])
def test_ajax():
    value = request.args.get("value")
    value = int(value)
    result = value * 2

    return jsonify({
        "result" :result, 
        })


if __name__ == "__main__":
    app.run(debug=True, host='0.0.0.0', port=8888, threaded=True)

ajaxのget送信を受け取るのがtest_ajaxメソッドになります。
送信されたvalueを受け取り受けったvalueを２倍にして返してます。