JavaScript の XMLHttpRequest を使って、同じディレクトリの CGI スクリプトに入力データを渡す例。
JavaScript が書き込んであるサンプルの HTML がこんなだとして、
post_text_sample.html
<html> <head> <meta charset="utf-8" /> <title>Post Text Sample</title> </head> <body> <form name="fm"> <p><textarea id="txt" cols= "110" rows= "10" wrap="hard"></textarea></p> <p><INPUT type="button" value="POST" onClick="postTxt(getElementById('txt').value);"></p> </form> <script type="text/javascript"> <!-- function postTxt(txt) { var req = new XMLHttpRequest(); req.open("POST", "./test_input.cgi"); req.setRequestHeader("Content-Type", "text/plain;charset=UTF-8"); req.send(txt); } // --> </script> </body> </html>
textarea に入力されたテキストを ./test_input.cgi に POST メソッドで投げてる。
で、投げられた方の CGI はどうやってそのデータを受け取るのかと調べてみたところ、Perl の CGI モジュールでは POSTDATA という名前で受け取る(なんて安直な仕様・・・)。
test_input.cgi
#! /usr/bin/perl -w use strict; use CGI; use URI::Escape; my $q = new CGI; # 'POSTDATA' にデータが入ってる my $txt = uri_unescape($q->param('POSTDATA')); # 何らかの処理(例としてテキストファイル書き出し) open my $out, ">", "output_sample.txt"; print $out $txt; close $out; # レスポンスで 200 OK を返したいがためだけ。 # それ以外の意味はない print print "Content-type: text/plain\n\n"; print "OK";
普段 JS とか CGI とかあんまり書かないのでちょっとハマったためメモしておく。