index.php
<!DOCTYPE html> <html lang="ja"> <head> <title>Ajax</title> </head> <body> <h1>Ajax</h1> <form id="form"> <div><label>送信する数字</label><input type="number" id="number" value="0"></div> <div> <label>送信するテキスト</label> <textarea id="text"></textarea> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> <div id="result"></div> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#form').submit(function(){ event.preventDefault(); var $form = $(this); $.ajax({ url:'http://localhost:8000/cgi-bin/index.py', type: 'post', dataType: 'text', data: { number: $('#number').val(), text: $('#text').val() }, }) .done(function(response){ $('#result').html(response); }) .fail(function(){ $('#result').html('Failed.'); }); }); }); </script> </body> </html>
index.py
#!/usr/bin/env python # -*- coding: utf-8 -*- import cgi, cgitb cgitb.enable() form = cgi.FieldStorage() text = form.getFirst("text") n = form.getFirst("number") sequence_list = [] print('Content-type: text/html\nAccess-Control-Allow-Origin: *\n') print("<p>送信された数字: {}</p>".format("None" if n is None else int(n))) print("<p>送信されたテキスト: {}</p>".format(text))
python -m http.server --cgi
何故だ? 問題はHTML側ではないと思うので、AWSもしくはsakuraでやってみるか。
index.phpをindex.htmlに変更します。
192.168.35.1 – – [26/Aug/2018 10:19:03] code 403, message CGI script is not executable (‘/cgi-bin/index.py’)
192.168.35.1 – – [26/Aug/2018 10:19:03] “POST /cgi-bin/index.py HTTP/1.1” 403 –
なに?
[vagrant@localhost app]$ cd cgi-bin
[vagrant@localhost cgi-bin]$ chmod 755 index.py
192.168.35.1 – – [26/Aug/2018 10:23:35] “GET / HTTP/1.1” 200 –
192.168.35.1 – – [26/Aug/2018 10:23:43] “POST /cgi-bin/index.py HTTP/1.1” 200 –
: そのようなファイルやディレクトリはありません
192.168.35.1 – – [26/Aug/2018 10:23:43] CGI script exit status 0x7f00
う~ん、なんでだろう。
jsのdocument.titleで取得してphpファイルに送ることもできるが、後々のことを考えるとpythonでやりたいですね。