構成は、
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}])
No comments:
Post a Comment