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

Ajaxを使ってPythonとJavascriptでやり取りを行う方法
きつねちゃん

Pythonで処理した結果をブラウザで表示させたい!

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

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

未経験からWebエンジニアへ転職したい人は、ぜひこちらの記事も合わせてご活用ください。
>>【現役Webエンジニアが解説】未経験からWebエンジニアに転職する方法

独学がつらいと感じているあなたへ

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

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

目次

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

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

Pythonで処理した結果をブラウザで表示させるための具体的な方法は、「HTMLの値をJavascriptを使ってPythonに送信する

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

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

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

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から変数を受け取る

では、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で変数を送受信する方法について解説してきました。

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

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

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

>>PythonでGUIアプリを作る方法【Tkinter】

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

学生ならPrime Studentがお得!

もし、あなたが学生ならを使うことで、参考書を実質10%OFFでお得に買うことができます。

とは、通常会費の半額の月額250円で、Amazonプライム会員と同じサービスを受けることができるようになるサービスです。

しかも、には通常のプライム会員とは別に、

  • Adobe Creative Cloudが5%OFF
  • Microsoft365 Personalが5%OFF
  • Jabraワイヤレスイヤホンが最大4,000円OFF

などの特典が盛りだくさん!

学生のうちにしか受けることができないサービスなので、このチャンスを逃さないようにしてください。

>> Prime Studentをチェック

よかったらシェアしてね!
目次
閉じる