Flaskでajax(jQuery)

クライアント側から、サーバにデータを送信。
サーバ側で処理をして、結果をクライアントに返すサンプル。

jQueryはまだまだ使い慣れてない。
・イベントの発生した要素を指す、$(this)セレクタ
・a要素のclickイベント
・一度だけイベントを起こす.one()
とかしっかり覚えとこう。

クライアント側(jQuery)

<script type=text/javascript>
  $(function(){
    $(".foo").one("click", function(){
      //クリックした要素のidをサーバに渡す
      var json = JSON.stringify($(this).attr("id"));
      $.ajax({
        type:'POST',
        url:'{{ url_for('foo') }}',
        data:json,
        contentType:'application/json',
        //サーバからの返送データ(json)を受け取る
        success: function(data){
          var bar_list = $.parseJSON( data );
          //jsonの要素数分、リストに追加
          for (var i in bar_list){
            $("ul").append("<li>" + bar_list[i] + "</li>" );
          }
        }
      });
      //a要素のクリックイベントの場合はfalseを返して、リンク遷移を回避する必要がある。
      return false;
    });
  });
</script>

サーバ側

from flask import Response
import json

@app.route('/_foo', methods=['POST'])
def foo():
     get_json = request.json
    
    #受け取ったデータをキーにしてDBから選択するとか、なんか処理

    #リストをjsonに変換してクライアントに返す
    return Response(json.dumps(return_json))

参考にさせていただきました。
http://a2c.bitbucket.org/flask/patterns/jquery.html
http://d.hatena.ne.jp/clngn/20120707/1341658666

Web制作の現場で使うjQueryデザイン入門[改訂新版] (WEB PROFESSIONAL)