<< google-code-prettifyでソースコードを美しく装飾。 | TOP | GAE/P向け統合開発環境 Eclipse PyDev。 >>

2011年05月30日

GAE/PとjQueryでJSONデータを簡単にAjax。

GAE for Python と jQeury を利用して、JSONデータのAJAX通信を行ってみる。

下のサンプルは、サーバへブログ情報パラメータ(ブログ題名とリンクURL)を渡すと、サーバ側は受け取ったブログ情報をそのままJSON形式に変換してクライアント(ブラウザ)へ返すという単純なものだ。

helloworld.py
# -*- coding: utf-8 -*-
import cgi
import os

from google.appengine.ext import webapp
from google.appengine.ext.webapp.util import run_wsgi_app
from google.appengine.ext.webapp import template


class MainHandler(webapp.RequestHandler):
  def get(self):
    template_values = {}
    path = os.path.join(os.path.dirname(__file__), 'json_ajax.html')
    self.response.out.write(template.render(path, template_values))


# 受け取ったリクエストパラメータ(ブログ情報)を
# そのままJSON文字列にして返すだけのリクエストハンドラ。
class OutputJSON(webapp.RequestHandler):
  def get(self):
    title = self.request.get('title').encode('UTF-8')
    link = self.request.get('link').encode('UTF-8')
    res = '{"title":"%s", "link":"%s"}' % (title, link)
    self.response.out.write(cgi.escape(unicode(res, 'UTF-8')))

application = webapp.WSGIApplication([('/', MainHandler),
                                     ('/OutputJSON', OutputJSON)],
                                     debug=True)

def main():
  run_wsgi_app(application)

if __name__ == "__main__":
  main()


json_ajax.html
<html>
<head>
  <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
  <title>GAE/P+jQueryでJSONをAJAXしてみる</title>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
$(function() {

  $("#btn").click(function() {
    // JSONレスポンスを返すURL
    url = "http://localhost:8080/OutputJSON";
    // リクエストパラメータ作成
    req = {
      "title":$("#title").val(),
      "link":$("#link").val(),
      "callback":"?" /* 他ドメインにリクエストする場合には必要 */
    };
    // AJAX
    $.getJSON(url, req, callback);
  });
  
  /* コールバック関数 */
  var callback = function(json){
      message = '<a href="' + json.link + '">' + json.title + '</a>';
      $('#res').html(message);
  };
});
  </script>
</head>
<body>
  <p>リクエスト</p>
  <input type="text" id="title" value="俺の砂箱" /><br/>
  <input type="text" id="link" value="http://sunabako.sblo.jp" /><br/>
  <button id="btn">送信</button>
  <p>レスポンス</p>
  <div id="res"></div>
</body>
</html>


ちなみに、GAEのSDKにも便利なJSON系ライブラリ django.utils.simplejson が標準装備されていて、場合によってはそちらを利用してJSONデータの変換を行うほうが断然楽である。使い方を以下に示しておく。
from django.utils import simplejson

# JSON形式文字列をディクショナリ(連想配列)へ変換
dect = simplejson.loads(str)
# ディクショナリ(連想配列)をJSON形式文字列へ変換
str = simplejson.dumps(dect)



タグ：AJAX python jquery Google App Engine JSON simplejson django
【GAE for Pythonの最新記事】
posted by 寄り道退屈男 at 13:38 | Comment(0) | TrackBack(0) | GAE for Python
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。
この記事へのトラックバックURL
http://blog.sakura.ne.jp/tb/45592660
※ブログオーナーが承認したトラックバックのみ表示されます。
※言及リンクのないトラックバックは受信されません。
この記事へのトラックバック