【サーバー】JavaScriptとPythonを連携し通信を行う方法：ajax経由

2022年10月22日2026年10月22日

📖 この記事は約 20 分で読めます。

概要

JavaScriptとPythonの連携は、ブラウザ側のJavaScriptからAjax（非同期通信）でサーバーへデータを送り、Python側をCGIで受け取る形で実現できます。本記事では、筆者がUbuntu 18.04 LTS＋Apache2.4＋Python 3.6.9の環境で実際に動作を確認したPOST通信の手順と、はまりやすい500エラーの対処を紹介します。

管理人

本記事の読者層は以下の方を想定しています。

本記事の読者層

HTMLとPython間でajax通信（非同期通信）でデータ受け渡しをしたい方
JavascriptとPython間でajax通信（非同期通信）でデータ受け渡しをしたい方
Raspberry Piなどの小型コンピューターで、ブラウザの画面からPythonプログラムを動かしたい方

JavaScriptとPythonを連携する方法は？結論と選択肢

結論：ブラウザ上のJavaScriptとサーバー側のPythonは、通常は別々の場所で動くため、直接呼び出すのではなく、HTTP通信でデータをやり取りして連携します。本記事では、JavaScriptのAjaxでリクエストを送り、PythonをCGIで受け取る方法を解説します。

連携方法	仕組み	本記事での扱い
Ajax＋CGI	JavaScriptのAjaxでリクエストを送り、ApacheがPythonスクリプトをCGIとして実行して結果を返す	手順を解説します。Python 3.13以降では、`cgi`モジュールが標準ライブラリから削除されています（2026年10月時点。出典：[Pythonコア開発者による告知](https://discuss.python.org/t/pep-594-has-been-implemented-python-3-13-removes-20-stdlib-modules/27124)）
Webフレームワーク（Flask・FastAPIなど）	Python側でWebアプリケーションを作り、JavaScriptから通信して結果を受け取る	記事の後半で触れ、詳細は別記事を案内します

HTML+Python間通信の基礎

Raspberry Piなどの小型コンピューターを利用してロボット開発・作成をしてみたい方などが多いのではないでしょうか。特に、遠隔操作で利用されるHTML画面からPythonプログラムを動かすHTML-Python通信はとても重宝する代物です。

今回はJavascriptのAjax（「Asynchronous JavaScript and XML」の略）を利用してサーバーへ情報を伝達する方法を紹介します。Ajaxとは簡単に言えば、JavaScriptでサーバー側と非同期通信を行うための技術になります。Ajaxの便利なところは、リクエスト中であっても、WEBアプリ上で操作ができなくなることがないという点です。これらAjaxの技術は、GoogleマップやGmail、Facebookなど、メジャーなWebサイトやツールでよく見かけるものです。

それでは、HTML+pythonの通信の流れを以下にご説明します。

以下の図は、HTML(JavaScript)をAjaxにより非同期通信を行い、Python側ではCGIで受信するという流れです。

Ajax上では、サーバー側へGET通信とPOST通信が行えます。特にPOST通信を利用してサーバーへメッセージの書き込みやデータの更新などを行ってみます。

これをCGI（Common Gateway Interface）で受けるという形になります。CGIは言語を問わずプログラムを作成できる点が特長で、Pythonでは標準ライブラリの「cgiモジュール」でも扱えます。今回はPython側の通信手段をCGIで行います。

Python-HTML(javascript)通信のテストの準備

今回のJavascriptとHTMLの連携確認のテスト環境は以下の通りです。

連携確認のテスト環境

Ubuntu 18.04 LTS+apache2.4 (server側。標準サポートは2023年5月31日に終了)
JavaScript jquery-3.5.1.js
Python 3.6.9 (server側。2021年12月23日にサポート終了)

2026年10月時点の補足です。上記は筆者が検証した当時の環境です。Ubuntu 18.04 LTSは、標準サポートが2023年5月31日に終了しています（Ubuntu Pro契約があれば、セキュリティ更新は2028年4月まで受けられます。出典：Canonical公式ブログ）。Python 3.6も、2021年12月23日にサポートが終了しています（出典：Python Developer’s Guide）。新しく環境を用意する場合は、サポート中のバージョンを使ってください。jQueryには3.5.1より新しい版が公開されており、2026年10月時点の最新は4.0.0、3系の最新は3.7.1です（出典：endoflife.date）。本記事のコードは3.5.1で動作を確認したもので、他のバージョンでの動作は確認していません。

【手順1】JavascriptでAjaxが使用できるかどうか確認

サーバー側に以下のhtmlファイルを置いて手動でアクセスできるか確認してみます。

今回はLinux Ubuntu18.04 LTSを利用して、外部からアクセスが可能なディレクトリ「/var/www/html」にて作業を行います。

<!DOCTYPE html>
<html lang="en">
<head>
   <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <script type="text/javascript">
$.ajax({
     success : function(response){
         alert('成功');
     },
     error: function(){
         //通信失敗時の処理
         alert('通信失敗');
     }
 });
   </script>

</head>

これをクライアントのブラウザ上(Chromeブラウザを推奨)で自身のURL（今回は「https://daraberu.aa0.netvolante.jp」としています）を開くと、以下のようにポップアップが表示されます。

「成功」が表示されれば「Javascript」+「Ajax」の使用ができます。そしたら次のステップへ進みます。

【手順2】Python3がインストールされているか確認

Python3のインストールをサーバー側へ行います。インストールの詳細は以下の記事をご参照いただくとして、ここでは、既にインストールされている前提で進めます。

SEO対策の賢者

Linux版 Python用pip3のインストール方法 – SEO対策の賢者 Linux版Pythonのインストール方法と各モジュールのインストール方法を解説します。

それではPython3のインストール先をwhichコマンドで確認してみます。ディレクトリ先は後で示すPythonプログラムにて利用致しますのでメモしておいてください。サーバー側で以下のコマンドを実行してみてください。

$which python3
/usr/bin/python3

$python3 --version
Python 3.6.9

「/usr/bin/python3」をメモしておきましょう。

本記事では、検証当時のPython 3.6.9を利用しています（2026年10月時点では、Python 3.6はサポートが終了しています）。

【手順3】CGIがインストールされているか確認

サーバー上でCGIを利用します。まず、CGIを有効にするために以下の手順でApache上でCGIが使用できる状況にします。

①CGIのモジュールを有効化します。

以下のコマンドでCGIを有効化できます。

$ sudo a2enmod cgid

②configファイルの設定：apache2.conf

Ubuntuサーバー上の「/etc/apache2/」ディレクトリ上に「apache2.conf」があります。こちらに以下を追記記載します。

<Directory /var/www/>
        Options Indexes FollowSymLinks ExecCGI
        AllowOverride all
        Require all granted
        AddHandler cgi-script .cgi .py
</Directory>

今回用いる「pythonファイル」と「htmlファイル」はともに「/var/www/html」に置きます。このため、<Directory …..>のディレクトリの指定はその上層「/var/www/」で問題ありません。

注意点
configファイルの設定を間違えると既にインストールしているwordPress等、他のwebアプリにも影響があるため書き換えは慎重にお願いします。

③apacheの再起動

configファイル「apache2.conf」の設定を反映させるため、以下のコマンドでapacheを再起動します。

＄sudo /etc/init.d/apache2 restart

apache2の設定方法などの詳細は以下の記事をご参照ください。

SEO対策の賢者

WEBサーバーの導入：ApacheのUbuntuを利用した構築方法 – SEO対策の賢者 Ubuntuは、非常に人気の高いLinuxディストリビューションで、特にサーバー環境で広く使われています。中でもApacheは、最も利用されているWebサーバーソフトウェアの一つで…

PythonとJavascriptの連携テスト環境

①HTMLファイルのコード

ajaxをJavascriptで動かす以下のHTMLファイルを「/var/www/html」に入れ込みます。

<!DOCTYPE html>
<html lang="en">
<head>
   <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <script type="text/javascript">
   $(function(){
      $.ajax({
      url: './test.py',
      type: 'post',
      data: {data: 'HTML-test'}
      }).done(function(data){
      console.log(data);
      }).fail(function(){
      console.log('failed');
      });
      });
   </script>

</head>
<body>
   <div>ajax-Python test</div>
</body>
</html>

このファイルは後ほどブラウザから、「http://(ご自身のドメイン名)/Ajax-test.html」にてアクセスして結果を確認します。

②Pythonファイルのコード

次に、python3のCGI経由でajax通信を読み取るコードを作成します。

#!/usr/bin/python3
# -*- coding: utf-8 -*-
#print("content-Type: text/plain\n")

import cgi

storage = cgi.FieldStorage()
print('Status: 200 OK')
print('Content-Type: text/html\n')
data = storage.getvalue('data')
recieve = data + ":Success!"
print(recieve)

以下、簡単ですが、これらコードを解説します。

まずファイル先頭に「/usr/bin/python3」を一番最初に加えます。

以下のようにajaxから受け渡されたdata(値)をcgi.FieldStorage()でpython上に格納します。

cgi.FieldStorage()

その後、data=’HTML-test’が格納されます。

data = storage.getvalue('data')

以下は、受け渡す際のおまじないです。（エラーにならないように宣言しておきます。）

print('Status: 200 OK')
print('Content-Type: text/html\n')

このコードをコマンドプロンプト上のPythonで実行しようとすると以下のエラーがでますが「data」（値）が送られてきていないので、この時点で心配する必要はありません。

$ python3 test.py
Traceback (most recent call last):
  File "test.py", line 14, in <module>
    recieve = data + ":Success!"
TypeError: unsupported operand type(s) for +: 'NoneType' and 'str'

なお、CGIとして実行するため、test.pyには実行権限が必要です（例：chmod +x test.py）。

500 Internal Server Errorの解決方法

一番のはまりどころは、以下に示すChromeブラウザツール上で「500 internal server error」というエラーが表示されたところです。このエラーでかなりの時間ロスをしました。

例えば、今回のエラーは、下記のようにChrome上での検証画面から確認できます。上記過程で、実行にともないコンソール表示で「failed」を示したことがあります。

どこでエラーが発生するかを確認するため、下図の「Network」タブをクリックするとテーブル上に「status」コードがでてきてエラー500を出している赤字の「test.py」が問題であることがわかります。

私の場合は、Chromeの言語設定を英語設定で使用していたためか、日本語表示で最初に記載していた「成功！」という表示ができずに（recieve = data + ":成功!"の部分）、「test.py」でエラー発生していました。日本語表記「:成功！」の部分を英語表記「:success!」に直した結果、このエラーが消えてうまくいきました。(上記のPythonコードでは修正済みです。)

ブラウザから実行した通信結果

以下結果を示します。

Chrome画面（下図左側はHTML画面表示@Chromeの検証画面）

Chromeブラウザ上で「ajax-Python test」と表示され（左上側）, Console上で「HTML-test:Success!」（右下側）と表示されていればajax通信に成功しています。

これにてPythonとHTML間の通信が確立しました。

厳密には、HTML上のJavascriptからajaxを利用して、「HTML-test」というデータをPythonで書いたCGI (test.py）へ送って、その返答である「HTML-test:success!」という文字列をajaxで呼び出してHTML表示させています。なんとも面倒くさい方法です。

今回CGIを使用しましたが、CGIは負荷が大きいこと、セキュリティ上の問題も多いことからレンタルサーバーでは使えない場合があります。

もう1つ、python上でsysモジュールを使う方法もありますが、本環境下のLinuxサーバーでは「sys.stdin.readline()」でAjaxからのPostデータを読み込めませんでした。他のサイトでも同様に通信ができないという報告もちらほら見られるようです。

出来る方がいたら教えて頂けたら幸いです！

XMLやJSONの型を利用してデータの「受け取り」と「受け渡し」をする方法

本記事は、Ajaxの非同期通信として簡単なレスポンスの手順をお伝えしました。実際には、XMLやJSON (JavaScript Object Notation)の型を利用することで同様に複数のデータをやり取りできます。

更に複雑なHTML-Python間で通信をする場合は、FlaskやFastAPI, DjangoなどのPython用定番フレームワークを勉強してみるのも良いかもしれません。これらWEBフレームワークの詳細に関しては以下の記事をご参照ください。

JavaScriptとPythonの連携でよくある質問

JavaScriptとPythonは似ていますか？

どちらも、変数の型を宣言せずに書ける動的型付けの言語という共通点があります。一方で、書き方（構文）は異なり、動く場所も違います。JavaScriptはブラウザで動かすのが基本で（Node.jsを使えばサーバーでも動かせます）、本記事のPythonはサーバー側で動かしています。この動く場所の違いがあるため、両者の連携にはHTTP通信（本記事ではAjax）が必要になります。

JavaScriptとPythonは、どちらから学ぶべきですか？

難易度は経験や目的で変わるため、本記事では優劣を判断していません。目的で決める場合は、次の順で確認してください。

ブラウザ上の画面や操作を作りたい場合は、JavaScriptが必要です。
サーバー側でデータを処理したい場合は、Pythonが選択肢になります。
本記事のようにブラウザからPythonを動かしたい場合は、両方の基礎が必要です。

まとめ

本記事のまとめ

本記事では、JavaScriptとPythonを連携させ、Ajax通信とCGIでデータをやり取りする方法を解説しました。

PythonとHTML間の通信にはJavaScript中で非同期通信Ajaxを使う方法があります。
サーバー内でPythonのCGIによる受け渡しを行い、通信できることを確認しました。
Python 3.13以降はcgiモジュールが標準ライブラリから削除されているため、新しい環境で作る場合は、FlaskやFastAPIなどのWebフレームワークも選択肢になります（2026年10月時点）。

次回の記事をご期待ください。どうぞよろしくお願いいたします。