Kensuke Kousaka's Blog

Notes for Developing Software, Service.

jQueryとPython CGI間でのAjaxによるJSONデータの通信

久しぶりにjQueryAjaxを用いてPython CGIJSONフォーマットでのデータのやり取りを実装しようとしたが,思いの外詰まってしまったのでメモ.

Ajax PythonCGI communicate sample using JSON forma ...

index.htmlで用意したSendボタンを押すことでsample.jsにおいてイベントが発火し,text変数にSample textを入れた後,send()が呼ばれてこの変数をJSONフォーマット化してAjaxでsample.cgiに送る.

sample.cgiはPython3で書かれたCGIファイルだが,送られてきたデータをsys.stdin.read()で読み込み,json.loads()JSONとしてロードする.その後JSONデータのKeyとしてsample.jsでJSONフォーマット化する際に設定したtextをここで指定し,データを読み出す.

Ajaxでsample.jsに返す際は,データを辞書で保存し,これをjson.JSONEncoder().encode()JSONフォーマット化してprint()で送る.

返ってきたデータはsample.jsのsuccess: function()において引数として渡しているdataに入る.sample.cgiではデータを辞書で保存する際にKeyにtextを設定したため,ここでもdata.textとしてKeyを指定し,データを読み出す.

以上のように実装することで,Ajaxを用いてJSONデータをやり取りし,ページの動的な書き換えができる.