jQueryでAjax on Kay framework

gae python kay jquery

jQueryの$.ajax()から送ったデータをKayで受け取りレスポンスを返すまでのコードをメモしておきます。


index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Top Page - jquery_ajax</title>
</head>
<body>
  <input type="text" id="data">
  <input type="button" value="送信" id="submit">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  <script type="text/javascript">
    $("#submit").click(function () {
      $.ajax({
        type: "POST",
        url: "/send",
        data: {"data": $("#data").val()},
        success: function (msg) {
          alert("success! : " + msg);
        }
      });
    });
  </script>
</body>
</html>

フォームとボタンを1つずつ用意して、ボタンが押されたらフォームに書いた内容をサーバに送るという内容です。今回はjQueryを使うためにGoogle Libraries APIを使っています。


urls.py

# -*- coding: utf-8 -*-

from kay.routing import (
    ViewGroup, Rule
)

view_groups = [
    ViewGroup(
        Rule('/', endpoint='index', view='jquery_ajax.views.index'),
        Rule('/send', endpoint='send', methods=['POST'], view='jquery_ajax.views.send'),
    )
]

kay.routingのRuleクラスはWerkzeugのRuleクラスを継承しています。その__init__()にmethodsという引数があったので、それを2つ目のルールで使っています。ここでPOSTメソッドを使うということを書いておけば、Viewでrequest.method == 'POST'とかしなくて済むので、Viewがスッキリします。


views.py

# -*- coding: utf-8 -*-

from werkzeug import Response

from kay.utils import render_to_response


def index(request):
    return render_to_response('jquery_ajax/index.html')

def send(request):
    return Response(request.form['data'] + u'ゲソ')

$.ajax()で送ったデータはrequest.formに格納されています。このrequest.formはWerkzeugのCombinedMultiDictクラスのオブジェクトなので、辞書から要素を取り出すようにキーを指定すれば要素を取得できます。


これで「うまくいった」などとフォームに書いてボタンを押すと、「success! : うまくいったゲソ」とalertされます。