見出し画像

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に出力するプログラムです。

実行結果

スクリーンショット 2020-07-30 18.29.44

ここからはコケたところをご紹介

まずApacheの設定もせずにHTMLとPythonファイルをアップしたところ

スクリーンショット 2020-07-30 18.35.34

Pythonのコードがまるまる返ってきた...
ここで必要なのがApacheの設定でした。

Options Indexes FollowSymLinks ExecCGI

まずOptionsに「ExecCGI」を追加します。

AddHandler cgi-script .cgi .py

さらにこの行を追加します。最後に「.py」を追加することで「.py」のファイルをPythonファイルとして扱ってくれるようになります。

第2のコケポイント

スクリーンショット 2020-07-30 18.47.51

Error 500 Internal Server Error...
サーバーやApacheの設定をいじくり回したんですが全く変化なし。実はPythonファイルを変更する必要があった。

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

Content-Typeを指定していないとエラーになってしまうようでした。

そしてこれをくぐり抜けると今度はこんな問題が

スクリーンショット 2020-07-30 18.56.04

スクリーンショット 2020-07-30 18.57.01

net::ERR_EMPTY_RESPONSE
net::ERR_INCOMPLETE_CHUNKED_ENCODING 200 (OK)
どちらもみたことのないエラー。。。なにこれ。

import cgi

storage = cgi.FieldStorage()
print('Status: 200 OK')

これを解決するのが上記の3行。これで動作するようになりました!

実はこれらを解決するのに1週間かかりました。挫折しそうにもなったので、これから勉強しようと思っている方はぜひ参考にしてみてください。
そのうちQiitaにも投稿しますので、ぜひ。

この記事が気に入ったらサポートをしてみませんか?