December 13, 2009

jQuery + PythonのJSONでのデータのやり取り


jQueryとPython CGIのデータのやり取りをJSONでおこないたい。
構成は、
index.html
sample.js
sample.py
(lib/jquery/jquery-1.3.2.js)

index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>jQuery + Python</title>
    </head>
    <body>
        <h1>jQuery + Python</h1>
    
  <form id="hoge">
   <input type="text" name="foo" />
   <input type="text" name="bar" />
   <input type="text" name="baz" />
  </form>
  
  <a id="foo" href="#">show</a>
  <a id="bar" href="#">clear</a>
  <div id="baz"></div>

  <script type="text/javascript" src="lib/jquery/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="sample.js"></script>
    </body>
</html>


sample.js

p2jはパラメータからJSON形式に変換する関数。どこかのページに掲載されていたのですが、失念してしまいました。すいません。
var $j = jQuery.noConflict();

function p2j(d) {
 if (d.constructor != Array) {
  return d;
 }
 var data={};
 for(var i=0;i<d.length;i++) {
  if (typeof data[d[i].name] != 'undefined') {
   if (data[d[i].name].constructor!= Array) {
    data[d[i].name]=[data[d[i].name],d[i].value];
   } else {
    data[d[i].name].push(d[i].value);
   }
  } else {
   data[d[i].name]=d[i].value;
  }
 }
 return data;
};


$j(document).ready(function(){ 
 $j('#foo')
 .click(function() {  
  // クエリ
  var query = $j(":input").serializeArray();
  console.log(p2j(query));
  
  // GETリクエスト
  $j.get('sample.py', query, function(text) {
   // 結果の処理
   var json = JSON.parse(text);
   var html = "";
   for (var i in json) {
    html += json[i].key + ':' + json[i].value + ' ';
   }
   $j('#baz').html(html);   
  });
  
  return false;
 });
 
 $j('#bar')
 .click(function (){
  $j('#baz').html('');
 }); 
});


sample.py

JSON形式にするにはjsonモジュールかsimplejsonモジュールがいいかもしれません。
#!/usr/bin/env python
# -*- coding: utf-8 -*-

import cgi
import cgitb; cgitb.enable()
import json

print "Content-type: text/javascript; charset=utf-8"
print

form = cgi.FieldStorage()

foo = form.getfirst("foo", "")
bar = form.getfirst("bar", "")
baz = form.getfirst("baz", "")

print json.dumps([{'key':'foo','value':foo},
                  {'key':'bar','value':bar},
                  {'key':'baz','value':baz}])