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 とかあんまり書かないのでちょっとハマったためメモしておく。
 
 
 

§1599 · Posted By · 5月 14, 2014 · Development · Tags: , , , , , · [Print]