データの受け渡し

フォームと CGI
1. C/C++ と CGI
2. PHP と CGI
URL とパラメータ
PHP から JavaScript へ

　　このページにおいては，HTML 以外，C/C++，JavaScript，PHP を使用します．これらの言語に関しては，他のコンテンツ（「 C/C++ 言語」「 JavaScript と C/C++ 」「 PHP と C/C++ 」等）または書物を参照して下さい．

　　FORM 要素は，ホームページにおいて，ユーザからの情報を受け取るために使用される要素です．例えば，ホームページを通してのアンケートや，ネットワークショッピング等に使用されます．しかし，単にフォームを作成しただけでは，ほとんど意味を持ちません．フォームを介して入力されたデータが，Web サーバに送られ，何らかの処理をされてこそ意味を持ってきます．そこで，CGI （ Common Gateway Interface ）が必要になってきます．CGI は，送られてきたデータを受け取り，何らかの処理を行います．場合によっては，結果をクライアント側（データを送った側，ブラウザ）に返します．

　　CGI は，外部のプログラム（ここでは，フォームを含んだホームページ）が，Web サーバとの間で情報を授受するための標準的な方法を規定するものです．この方法を実現するプログラムのことを，CGI プログラムと呼び，Web サーバに準備しておく必要があります．CGI プログラムは，どのようなプログラミング言語でも書くことが出来ます．また，UNIX のシェルスクリプトのように，スクリプト言語を使用することも可能です．

　　フォームを介してサーバにデータを送信すると，CGI プログラムは，標準入力からの文字列データとして送信されたデータを読み込みます．また，CGI プログラムからブラウザに情報を送る場合は，基本的に，送る情報を標準出力へ出力すれば良いことになります．ただし，そのままでは，ブラウザがサーバから送られてきた情報をどのように扱って良いか分かりません．そこで，CGI プログラムは，必要な出力を行う前に，どのようなデータを送信するかを表す HTTP ヘッダを出力してやる必要があります．ヘッダを出力後，空行を１行だけ出力し，その後必要な情報を出力します．

　　HTTP ヘッダには非常に多くのものが存在しますが，最もよく使用されるのは，情報の形式（ MIME タイプ）を指定する Content-type というヘッダです．例えば，MIME タイプが text/html の場合（コメントは，text/plain の場合），C/C++ 言語で記述すれば，

printf("Content-type: text/html\n\n");	 // printf("Content-type: text/plain\n\n");

の後に，必要な情報を出力することになります．

URL とパラメータ

　　単に，特定のデータを指定したページに受け渡すだけであれば，下に示す例のように，URL の最後に ? をつけて受け渡したいパラメータを記述することによって可能です．test3.php，または，test3.htm をクリックすると，

<A HREF="test3.php?par1=10&par2=abc">

<A HREF="test3.htm?par1=10&par2=abc">

という記述によって，2 つのパラメータを test3.php，または，test3.htm に送っています．test3.php は，受け取ったパラメータを表示しているだけであり，以下に示すように，METHOD="get" の場合に対する CGI プログラムと全く同じものです．なお，test3.php では，参考のため，JavaScript によるパラメータの受け取りも行っています．JavaScript だけを使用する場合は，test3.htm のように，通常の HTML ファイルで構いません． test3.php

<!DOCTYPE HTML>
<HTML>
<HEAD>
	<TITLE>データの受け渡し</TITLE>
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../master.css">
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<META NAME=viewport CONTENT="width=device-width, initial-scale=1">
	<SCRIPT TYPE="text/javascript">
		function GetParameter()
		{
			let result = new Array();
			if(1 < window.location.search.length) {
							// 最初の1文字 (?記号) を除いた文字列を取得する
				let str = window.location.search.substring(1);
							// 区切り記号 (&) で文字列を配列に分割する
				let param = str.split('&');
				for(let i1 = 0; i1 < param.length; i1++ ) {
							// パラメータ名とパラメータ値に分割する
					let element = param[i1].split('=');
					let Name    = decodeURIComponent(element[0]);
					let Value   = decodeURIComponent(element[1]);
							// パラメータ名をキーとして連想配列に追加する
					result[Name] = Value;
				}
			}
    		return result;
		}
	</SCRIPT>
</HEAD>
<BODY CLASS="white">
	<H1 CLASS="center">送信されたデータ</H1>
	<H3>PHP による方法</H3>
	<PRE>
		<?php
			print_r($_GET);
		?>
	</PRE>
	<H3>JavaScript による方法</H3>
	<SCRIPT TYPE="text/javascript">
		let result = GetParameter();
		document.write(result['par1'] + "<BR>");
		document.write(result['par2'] + "<BR>");
	</SCRIPT>
</BODY>
</HTML>

test3.htm

<!DOCTYPE HTML>
<HTML>
<HEAD>
	<TITLE>データの受け渡し</TITLE>
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../master.css">
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<META NAME=viewport CONTENT="width=device-width, initial-scale=1">
	<SCRIPT TYPE="text/javascript">
		function GetParameter()
		{
			let result = new Array();
			if(1 < window.location.search.length) {
							// 最初の1文字 (?記号) を除いた文字列を取得する
				let str = window.location.search.substring(1);
							// 区切り記号 (&) で文字列を配列に分割する
				let param = str.split('&');
				for(let i1 = 0; i1 < param.length; i1++ ) {
							// パラメータ名とパラメータ値に分割する
					let element = param[i1].split('=');
					let Name    = decodeURIComponent(element[0]);
					let Value   = decodeURIComponent(element[1]);
							// パラメータ名をキーとして連想配列に追加する
					result[Name] = Value;
				}
			}
    		return result;
		}
	</SCRIPT>
</HEAD>
<BODY CLASS="white">
	<H1 CLASS="center">送信されたデータ</H1>
	<SCRIPT TYPE="text/javascript">
		let result = GetParameter();
		document.write(result['par1'] + "<BR>");
		document.write(result['par2'] + "<BR>");
	</SCRIPT>
</BODY>
</HTML>

PHP から JavaScript へ

場合によっては，PHP によって計算した結果などを JavaScript のプログラムに渡したい場合があります．上に述べた URL のパラメータを利用しても可能ですが，以下に示す方法（ test4.php ）を使用すれば，同じページ内で可能になります． test4.php

<!DOCTYPE HTML>
<HTML>
<HEAD>
	<TITLE>データの受け渡し</TITLE>
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../master.css">
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<META NAME=viewport CONTENT="width=device-width, initial-scale=1">
</HEAD>
<BODY CLASS="white">
<?php
	$x[0] = "fig0.jpg";   // PHP で得られた結果
	$x[1] = "fig1.jpg";   // PHP で得られた結果
?>
	<SPAN ID="a0" STYLE="display:none"><?php echo $x[0] ?></SPAN>
	<SPAN ID="a1" STYLE="display:none"><?php echo $x[1] ?></SPAN>
	<SCRIPT TYPE="text/javascript">
		let x = new Array();
		x[0]  = document.getElementById("a0").innerHTML;
		x[1]  = document.getElementById("a1").innerHTML;
		document.write(x[0] + "<BR>");
		document.write(x[1] + "<BR>");
	</SCRIPT>
</BODY>
</HTML>