Flask + jQuery(ajax)でページ遷移せずにform入力データを送る

Flask（PythonのWebフレームワーク）とjQueryのajaxを使って、formの内容を非同期通信で送る方法です。

クライアント側

HTML

<form class='ajax_submit' method="post" action="/toPostURL">
  <input type="text" name="username">
  <input type="text" name="age">
  <button>Submit</button>
</form>

jQuery

$('.button').on('click', function(){
  $.ajax({
    url: $(this).parent('form').attr('action'),
    type: 'post',
    data: $(this).parent('form').serialize()
  });
});

serialize()により、指定したform内の値がusername=[入力値]&age=[入力値]のように変換される。便利だ。

※submitボタンをtype='submit'なんかで指定している場合は、event.preventDefault();で本来のPOST機能の取り消す処理を忘れずに！

サーバー側

Python

@app.route('/toPostURL', methods=['POST'])
def get_user_info():
    username =  request.form['username'];
    age = request.form['age'];
    response = Response()
    response.status_code = 200
    return response

実装環境

Flask : 0.12.2
Python : 3.5.2

お世話になったページ

Python Flask jQuery Ajax POST