製作・改造なんでもやっちゃう広くて浅い活動日誌

2017/101234567891011121314151617181920212223242526272829302017/12

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
先日のPythonを使ってJSONPを返すコードと、PythonにGetメソッドでデータを送る方法があればJavascriptとPythonで双方向のデータのやりとりが出来ます。

結果はjQueryを使って表示していますので、以下のコードを使用する場合はjQueryをダウンロードしてhtmlと同じフォルダに置くか、ソースを適宜変更して下さい。

といっても、前回のコードからの主な変更点は、フォームの入力を増やしたことと、Pythonコードを読み込む時にGetメソッドに合うパラメータを加えた程度です。
Pythonの方ではクエリを読み込み、計算結果をJSONPで返しています。
最終的にJSONPにより呼び出されたcallback関数が「計算結果」の部分の文字を書き換えるようになっています。
エラー処理等は行なっていない最低限なコードなのでご了承下さい。
また、ローカルでCGIを試す場合はこちらの記事を参考にして下さい。

<html>
<head>
<title>JavascriptからPythonにGETで送ってJSONPで帰ってみる</title>
<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
<script type="text/javascript">
function callback(json) {
$("#result").html("答えは "+json.answer);
}

function send() {
var s = document.createElement('script');
a = document.form1.a.value;
b = document.form1.b.value;
param = "?a="+a+"&b="+b
s.src = '/cgi-bin/jsonp.py'+param;
document.body.appendChild(s);
return false;
}
</script>
</head>
<body>
<form name="form1" onsubmit="return send()">
<input type="text" name="a" value="1"> +
<input type="text" name="b" value="2">
<input type="submit" value="計算" />
</form>
<div id="result">計算結果</div>
</body>
</html>


#GETメソッドでデータを受けとるおまじない
import os
import cgi

if 'QUERY_STRING' in os.environ:
query = cgi.parse_qs(os.environ['QUERY_STRING'])
else:
query = {}
#おまじない ここまで

a = int(query['a'][0]) #データaを整数として読み込む
b = int(query['b'][0]) #データbを整数として読み込む
c = a + b #aとbの足し算を行う

#出力
print "Content-Type:text/javascript"
print
print "callback({'answer':'%s'});"%(str(c))


例によって、結果を画像で示します。

js-python-js.html

計算ボタンをクリック↓

js-python-js.html 計算結果


ここまで出来れば多少複雑なことも出来るようになれるかな。



みんなのPython Webアプリ編 [みんなのシリーズ]みんなのPython Webアプリ編 [みんなのシリーズ]
柴田 淳

ソフトバンククリエイティブ
売り上げランキング : 248959

Amazonで詳しく見る
関連記事
コメント
この記事へのコメント
QVLさま、

非常に素晴らしいです。プログラムも綺麗ですし、かなり安定して走りました。pythonだけでプログラム組むより、こちらの方がjavascriptのプログラムを盛り込めるので応用力は高まりそうです。

ちょっと思ったのですが、javascriptってメモリー機能がついているのではなかったでしたっけ?CGIはメモリーがありませんよね?jsonpがあればサイト上で今まで組めなかったようなpythonプログラムを組めませんか?

例えば、JS1を表紙のようにしてPYで計算してJS2をメモリーのように使う。こんなことが可能な気がしますけど、セキュリティー上問題ありですかね?

QVLさんはpylonsとか使っていますか?

2011/05/04(水) 14:22 | URL | JunJun #-[ 編集]
QVLさま、

質問があります。下記のボタンの変数をpythonに送って集計して別の質問をしてまた答えを得て。。。を繰り返すものを作ろうとしております。jsonpが好ましいように思います。

<form name="form1" onsubmit="return send()">
<input type="submit" name="btn1" value="1" /><br>
<input type="submit" name="btn2" value="2" /><br>
<input type="submit" name="btn3" value="3" /><br>
</form>

もし良い方法が解りましたら教えてはいただけませんでしょうか?

もしかしたらonclick="XXX"みたいなのも使えるかも知れません。


まだQVLさんは学生ですか?上記へメールいただけると幸いです。
2011/05/05(木) 20:15 | URL | JunJun #-[ 編集]
JunJun様

メモリー機能…そんなのもあるんですね。使いこなせると面白そうですね。
Pylonsは知りませんでした。
勉強してみたら記事のネタにするかもしれません。

集計して別の質問して…ですか。input typeがbuttonならonclickで、という感じでしょうかね。ひとまず何か作ってみるといいですよ。

それと、プロフィールにあるように私は学生です。
2011/05/07(土) 01:36 | URL | QVL #WN5t6YfU[ 編集]
コメントを投稿する
URL:
Comment:
Pass:
秘密: 管理者にだけ表示を許可する
 
トラックバック
この記事のトラックバックURL
http://creatornote.blog87.fc2.com/tb.php/31-70e793b4
この記事にトラックバックする(FC2ブログユーザー)
この記事へのトラックバック
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。