IT技術

Ajaxを使ってPythonとJavascriptでやり取りを行う方法

Ajaxを使ってPythonとJavascriptでやり取りを行う方法
Pythonで処理した結果をブラウザで表示させたい

仕事でこれを解決する必要があったので、いろいろと調べてみました。

なんとか動作させることもできたので、同じように悩んでいる方向けに解説していきます。

独学で勉強するのがつらいと感じてませんか?

わからない部分があるとき、誰かに質問ができると効率よく勉強を進めることができるようになります。

TechAcademyであれば、1週間無料でプログラミングスクールの体験をオンラインで受けることが可能です。

この期間にわからない部分の質問をするのもいいですし、プログラミングスクールの雰囲気を体験するのもいい刺激になるのでオススメですよ。

>> TechAcademyの無料体験はこちら

Pythonの結果をブラウザで表示させる方法

Pythonの結果をブラウザで表示させる方法
 
Pythonで処理した結果をブラウザで表示させるための具体的な方法は、

HTMLの値をJavascriptを使ってPythonに送信する

おそらく、これが一番簡単な方法です。

JavascriptからPythonへと変数を渡す際は、Ajaxを使います。

Ajaxを使ってPythonへと変数を渡す

送信
 
では、具体的にAjaxを使ってPythonへと変数を渡してみましょう。

jQueryを使って書いてみます。

$(function(){
    $.ajax({
        url: 'recieve.py',
        type: 'post',
        data: '送信メッセージ'
    }).done(function(data){
        console.log(data);
        });
    }).fail(function(){
        console.log('failed');
    });
});

 
recieve.pyというPythonファイルに、送信メッセージという文字列を渡しています。

そして、Pythonから処理の結果を受け取り、それをコンソールログへと出力するというシンプルな動作です。

失敗した場合はfailedと出力します。

PythonでJavascriptから変数を受け取る

受信
 
では、PythonでJavascriptから送信されたメッセージを受け取ってみましょう。

#!C:/Users/user/AppData/Local/Programs/Python/Python37/python.exe
# -*- coding: utf-8 -*-

import sys

recieve = sys.stdin.readline()
recieve = recieve + "OK!"

print('Content-type: text/html\n')
print(recieve)

 
コード自体はシンプルです。

Ajaxで送られてきたメッセージの後ろにOKと付けて返すだけです。

では、それぞれの処理について解説していきます。

Pythonを実行する環境を準備する

Pythonをターミナルから起動させる方法は非常に簡単です。

python sample.py

 
これでsample.pyというPythonファイルを実行することができます。

しかし、Ajaxを使ってJavascriptから起動する場合はそういう訳にはいきません。

どのプログラムを使って実行するのか、コードの中に書く必要があります。

それが、一番最初の

#!C:/Users/user/AppData/Local/Programs/Python/Python37/python.exe

 
これです。

Pythonを実行するには、C:/Users/user/AppData/Local/Programs/Python/Python37/python.exeを使うと明記しています。

そうすることで、指定したpython.exeが実行されるようになります。

Pythonの実行ファイルがどこにあるのか調べるためには、

import sys

sys.executable

 
こちらで、Python実行ファイルの絶対パスを取得することができます。

変数を受け取る

標準入力であるreadlineを使うことで、Ajaxからの変数を受け取ることができます。

recieve = sys.stdin.readline()

 
これで受け取った変数をrecieveという変数に格納することができます。

こうすることで、Python内で自由に使うことができるようになります。

Javascriptへ変数を返す

Pythonで処理した結果をJavascriptへと返すには、標準出力であるprintを使います。

printで出力された値がJavascriptへと渡されます。

ただし気をつけなければいけないのは、値を渡す前にヘッダー情報を送信する必要がある点です。

今回Javascriptへと渡すので、Content-type: text/htmlとヘッダー情報を送信します。

これがないとJavascriptでうまく受け取ることができません。

そのため、recieveという変数をJavascriptへと渡す場合は、

print('Content-type: text/html\n')
print(recieve)


このような送信方法になります。

Ajaxを使ってPythonとJavascriptでやり取りを行う方法まとめ

Ajaxを使ってPythonとJavascriptでやり取りを行う方法まとめ
 
Ajaxを使ってPythonとJavascriptで変数を送受信する方法について解説してきました。

PythonとJavascriptでやり取りができるようになると、Pythonで作ったプログラムをブラウザ上で簡単に動かすことができるようになります。

つまり、GUIの部分がHTMLで表現することができるのです。

通常であれば、GUIはTkinterなどを使って表現する必要がありますが、それがHTMLタグで書けると非常に便利ですね。

ただ、その場合はWebサーバが動いている必要があるので、ご注意ください。

ローカル環境であればXAMPPを使って簡単に構築することができます。

参考になれば幸いです!

どこからでも開発できる環境を作りませんか?

ConoHa VPSを使えば、クラウド上に自分だけの開発環境を構築することができます!

ConoHa VPSのメリット
  • 1回環境を作ればマシン毎に作り直す必要がなくなる
  • 開発途中のコードを外出先からでも簡単にいじることができる
  • 従量課金制で使うこともできる
  • 従量課金制で使った場合でも上限を超えることはない
定額プランでも月額620円から使うことができるので、コスパ最強!
\今なら初期費用無料/

ConoHa VPS公式ページ >>