MENU
らけ
ガジェット大好きエンジニア
元々ネットワークエンジニアでしたが、残業と出張だらけの生活が嫌になりプログラミングを勉強して転職。
現在は在宅ワークでプログラマとして働いています。

Apple製品・ガジェット・家電が好きなので、実際に使ってみたレビュー記事をメインに書いてます。

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

当ページのリンクには広告が含まれています。
Ajaxを使ってPythonとJavascriptでやり取りを行う方法
きつねちゃん

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

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

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

タップできる目次

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タグで書けると非常に便利ですね。

あわせて読みたい
PythonでGUIアプリを作る方法【Tkinter】 Tkinterを使えばPythonで簡単にGUIのアプリケーションを作成することができます。基本的なGUIアプリケーションの作り方について解説していきます。

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

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

あわせて読みたい
【WordPress】テーマ変更前にはローカル環境で動作確認が必須【XAMPPの環境構築方法を解説】 Wordpressでテーマ変更を行う際、直接してしまうと、不具合が起こったりデザインが崩れてしまうことがあります。ローカル環境を作って、そこで事前に動作確認をすることで、そのような事態になることを防ぐことができます。どうすればローカル環境を作ることができるのか、詳しく手順を解説していきます。

参考になれば幸いです!

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

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
タップできる目次