AjaxでPythonからデータを受け取るまで
「AIといえばPython!」ということでちょっと勉強してみようかと思い、始めたら早速コケたので、問題とその解決法を書こうと思います。
PHPと同じようにHTML(Javascript)からAjax通信でPythonにデータを送って、返り値をもらえればあとは他の言語と同じ要領で勉強ができるので、そこをとりあえずのゴールにします。
まずは正しく動作するまでの設定の流れを紹介します。
動作環境
OS: ubuntu 18.04
LAMP環境構築済み(ホームディレクトリ「/var/www/html」)
Python3 インストール済み
HTML(Javascript)
<!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>
$(function(){
$.ajax({
url: './test.py',
type: 'post',
data: {data:'テスト'}
}).done(function(data){
console.log(data);
}).fail(function(){
console.log('failed');
});
});
</script>
</head>
<body>
<div>testtest</div>
</body>
</html>
test.py(Pythonファイル)
#!/usr/bin/env python3
# -*- coding: utf-8 -*-
import cgi
storage = cgi.FieldStorage()
print('Status: 200 OK')
print('Content-Type: text/html\n')
data = storage.getvalue('data')
recieve = data + "成功!"
print(recieve)
Apacheの設定変更
<Directory /var/www/>
Options Indexes FollowSymLinks ExecCGI
AllowOverride None
Require all granted
AddHandler cgi-script .cgi .py
</Directory>
※Apacheの設定ファイルの中でホームディレクトリを指定している箇所を上記のように変更します。
※Apacheの設定ファイルの場所はGoogleで検索してね☆
上記のプログラムはHTMLから送信した文字列に「成功!」という文字を追加して返して、それをconsoleに出力するプログラムです。
実行結果
ここからはコケたところをご紹介
まずApacheの設定もせずにHTMLとPythonファイルをアップしたところ
Pythonのコードがまるまる返ってきた...
ここで必要なのがApacheの設定でした。
Options Indexes FollowSymLinks ExecCGI
まずOptionsに「ExecCGI」を追加します。
AddHandler cgi-script .cgi .py
さらにこの行を追加します。最後に「.py」を追加することで「.py」のファイルをPythonファイルとして扱ってくれるようになります。
第2のコケポイント
Error 500 Internal Server Error...
サーバーやApacheの設定をいじくり回したんですが全く変化なし。実はPythonファイルを変更する必要があった。
print('Content-Type: text/html\n')
Content-Typeを指定していないとエラーになってしまうようでした。
そしてこれをくぐり抜けると今度はこんな問題が
net::ERR_EMPTY_RESPONSE
net::ERR_INCOMPLETE_CHUNKED_ENCODING 200 (OK)
どちらもみたことのないエラー。。。なにこれ。
import cgi
storage = cgi.FieldStorage()
print('Status: 200 OK')
これを解決するのが上記の3行。これで動作するようになりました!
実はこれらを解決するのに1週間かかりました。挫折しそうにもなったので、これから勉強しようと思っている方はぜひ参考にしてみてください。
そのうちQiitaにも投稿しますので、ぜひ。
この記事が気に入ったらサポートをしてみませんか?