- 締切済み
JavaScriptからページを変移せずにcgiへ値を送信
onmousedownをイベントハンドラとし、マウスクリックされる度にその瞬間のマウスのX座標とY座標を記録するプログラムを作っています。座標獲得まではJavaScriptで出来たのですが、この値をcgiに上手く渡せません。そもそもJavaScriptからcgiプログラムを呼び出すにはどうしたら良いのかもよく分かりません。 とあるところでdocument.write('<script src="abc.cgi"></script>')を使う方法があると聞いたので、アドレスの後にクエリで座標の値を続かせる形で試してみたのですが、document.writeでページの書き換えが行なわれてしまうために1度しか使えず、またそのページの閲覧も中断されてしまうので実用的なものではありませんでした。 このページ変移が行なわれてしまうというのも問題です。 これらの解決方法を教えていただきたいと思います。 皆様、どうかよろそくお願いいたします。
- taku17
- お礼率11% (87/767)
- JavaScript
- 回答数4
- ありがとう数0
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- ralf124c
- ベストアンサー率52% (232/446)
ANo.3さんの解答がたいへんよかったので、それを参考に改良しました。 リンクは規約違反(すいません)になるようですので入るかどうかわかりませんがとりあえず。 HTMLパート <HTML> <HEAD> <TITLE>Sample</TITLE> <SCRIPT Language="JavaScript"> <!-- function send(){ var f=document.forms['frm']; f.elements['X'].value = event.x; f.elements['Y'].value = event.y; f.submit(); } document.onmousedown = send; // --> </SCRIPT> </HEAD> <BODY bgColor="#FFFFFF"> <P>ウィンドウ内でマウスのボタンを押す <iframe src="dummy.html" name="ifra" width="0" height="0" style="display:none;"></iframe> <form action="test01.cgi" target="ifra" name="frm" style="display:none;"> <input type="hidden" name="X" value=""> <input type="hidden" name="Y" value=""> <input type="submit" name="sbmt" value=""> </form> </BODY></HTML> CGIパート #!/usr/bin/perl ## 出力ファイル名 my $FN = 'TEST_001.TXT'; ## Postメソッド取得用 sub readMethod{ my %rm_in; my $paramPost; read(STDIN, $paramPost, $ENV{'CONTENT_LENGTH'}); my @tmpData=split(/&/,$paramPost); foreach(@tmpData){ my ($p1,$p2)=split(/=/,$_); $p2 =~ tr/+/ /; $p2 =~ s/%([a-fA-F0-9][a-fA-F0-9])/pack("C", hex($1))/ego; $rm_in{$p1}=$p2; } return %rm_in; } ## メソッド取得 my %in = readMethod(); ## 結果出力 open(OUT01,'>>'.$FN); print OUT01 "X = ".$in{'X'}." / Y = ".$in{'Y'}."\n"; close(OUT01); ## ブラウザに履歴が残らぬように print "Content-type: text/html\n\n"; print <<HTML_BODY; <SCRIPT Language="JavaScript"> <!-- top.history.back(1); //--> </SCRIPT> HTML_BODY exit; //////////
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
<iframe>を隠しておいて<form>からtarget指定で送信する。 ANo.2にあるように、フレームでも可能ですし、 window.open()を使って開いたウインドウをtargetにしても可能 img =new Image(); img.src="abc.cgi?x=50&y=120"; （CGIスクリプトからのデータをJavaScriptで受け取ることが出来ません） script=new document.createElement('SCRIPT'); script.src="abc.cgi?x=50&y=120"; document.body.appendChild(script); （DOCTYPEによっては document.documentElement.appendChild(script); かも <head>に入れるのってどうやるんだっけ(´Д ｀ ) ） Ajaxを使う ----------------- <iframe>か、一般に公開されているAjaxライブラリを使うのが一番簡単かなと思います。 <iframe src="dummy.html" name="ifra" width="0" height="0" style="display:none;"></iframe> <form action="abc.cgi" target="ifra" name="frm" style="display:none;"> <input type="hidden" name="x" value=""> <input type="hidden" name="y" value=""> <input type="submit" name="sbmt" value=""> </form> <script> function send(x,y){ var f=document.forms['frm']; f.elements['x'].value=x; f.elements['y'].value=y; f.submit(); } </script> <script> send(50, 120); //送信 </script> ＊動作未検証
- ralf124c
- ベストアンサー率52% (232/446)
簡単にやろうとすると「ページ切り替え」か「新しいページを出す」しかありません。 むかし、スタイルシートを駆使してやったこともありましたがスクリプトの組み込みが半端じゃなかったり環境によって不具合が出たりで… フレームを利用してうしろで動くＣＧＩを０サイズで隠して動作させればかなり簡単にすみます。 構成として フレームページ：２分割 比率 *:0 *側にくだんのページ 0側にCGI わからないことがありましたら聞いてください。
- pipipi523
- ベストアンサー率40% (148/365)
ここのページが参考になると思います http://www.openspc2.org/JavaScript/Ajax/Ajax_study/index.html
