• 締切済み

JavaScriptからページを変移せずにcgiへ値を送信

onmousedownをイベントハンドラとし、マウスクリックされる度にその瞬間のマウスのX座標とY座標を記録するプログラムを作っています。座標獲得まではJavaScriptで出来たのですが、この値をcgiに上手く渡せません。そもそもJavaScriptからcgiプログラムを呼び出すにはどうしたら良いのかもよく分かりません。 とあるところでdocument.write('<script src="abc.cgi"></script>')を使う方法があると聞いたので、アドレスの後にクエリで座標の値を続かせる形で試してみたのですが、document.writeでページの書き換えが行なわれてしまうために1度しか使えず、またそのページの閲覧も中断されてしまうので実用的なものではありませんでした。 このページ変移が行なわれてしまうというのも問題です。 これらの解決方法を教えていただきたいと思います。 皆様、どうかよろそくお願いいたします。

みんなの回答

  • ralf124c
  • ベストアンサー率52% (232/446)
回答No.4

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; //////////

回答No.3

<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)
回答No.2

簡単にやろうとすると「ページ切り替え」か「新しいページを出す」しかありません。 むかし、スタイルシートを駆使してやったこともありましたがスクリプトの組み込みが半端じゃなかったり環境によって不具合が出たりで… フレームを利用してうしろで動くCGIを0サイズで隠して動作させればかなり簡単にすみます。 構成として  フレームページ:2分割 比率 *:0  *側にくだんのページ 0側にCGI わからないことがありましたら聞いてください。

  • pipipi523
  • ベストアンサー率40% (148/365)
回答No.1

ここのページが参考になると思います http://www.openspc2.org/JavaScript/Ajax/Ajax_study/index.html

関連するQ&A

  • JavaScriptの値をPHPで取得

    こんにちわ。よろしくお願いします。 いま、JavaScriptで取得した値を同一ページ内でPHPの変数に入れることはできないでしょうか? 例えば <SCRIPT language="JavaScript"> <!-- document.write(document.referrer); // --> </SCRIPT> というのがあったとして これの値をPHPの変数に入れることができればなぁっと考えています。 自分的にには無理っぽいかなって思っているのですが、 もしかしたらなにか方法があるかもしれないと思い 質問させていただきました。 なにか方法がわかる方がいらっしゃいましたらアドバイスお願いします。

    • ベストアンサー
    • PHP
  • JavaScriptの値を、cgiに渡す方法を教えてください。

    JavaScriptの値を、cgiに渡す方法を教えてください。 jsファイルの変数に、テキストボックスの入力値が入っています。 それを、cgiに渡して、その変数の値を、ファイルに 書込みたいと考えています。 __test.html_________ <head><script src="keep.js"></script></head> <form name="f1" action="keep.js"> <input type="text" name="a_text"> <input type="button" value="クリック" onclick="keep()"> </form> _________________________ ___keep.js_______________ function keep() { var a_text = document.f1.a_text.value; ■この変数「a_text」をcgiファイルに渡したいです。 } __________________________ __●.cgi_______________ ■なんだかの方法で、上記keep.jsの変数、a_textを取得して、 この●.cgiでファイルをopenして、a_textの値を 書込みたいです。 ______________ よろしく、お願いします。

  • javascriptでCGIに値を渡したいのですが、テキストエリアの値で改行コードが消えてしまいます。教えて下さい。

    javascriptでCGIに値を渡したいのですが、テキストエリアの値で改行コードが消えてしまいます。教えて下さい。 別窓ページにてtest.cgiを呼び出し、そのCGIに値を渡したいのですが、 一応値はテキスト形式で渡せるのですが、テキストエリアで入力したものの 改行コードが消えてしまいます。何か良い方法があれば、教えて下さい。 <FORM name="test" ACTION="javascript:test_window_open('/cgi-bin/test.cgi?bikou='+document.test.bikou.value);"> : : <TEXTAREA rows="8" cols="50" name="bikou"></TEXTAREA>

  • javascriptからCGIへの値渡し

    cookieは利用しない方向で考えています。 HTML上のdocument.form01.のsubmitが押下されたら一度手入力されたデータ(userinput)を加工し、 別のフォームform02.valueに格納してtest.cgiにPOSTで投げる動作を期待しています。 下記だとページ遷移無しで一時的な格納まで確認しましたが CGIへの送信が機能していないようです。 どの様にすべきでしょうか? [html] <script type="text/javascript"> <!-- function onSubmit() { document.form02.sendform.value = '\"' + document.form01.userinput.value + '\"'; document.form02.submit(); } --> </script> <body> <form name="form02" method="POST" action="test.cgi"> <input type="hidden" name="sendform" value=""> </form> <form method="POST" action="" name="form01"> <input type="text" name="userinput"> <input type="submit" value"送信" onclick="return onSubmit();"> </form> </body> </html>

  • javascriptからCGIにデータを持たせるには

    こんがらがってきました。 javascriptにて得た値をhiddenなどに入れてsubmitして次ページに値を引っ張っていくのはわかります。 そうではなく、 たとえば全ページのURLをdocument.referrerで取得して、 <A HREF="next.cgi?maenopage=★">次のページへ</A> のように★の部分に入れてリンクで引っ張っていくのはできないと考えればいいのしたか。 できないと思っていたのですが、自信がなくなって来たので質問させていただきました。 #「絶対できません」という断言など含めてアドバイスを。 (^^;

  • JavaScriptでデータ送信

    あるJavaScriptを使ったPerlスクリプトの改造を行っています。 <A href="JavaScript:dataTrans()" class="link">link</A>をクリックすることにより、 function dataTrans(){ if(startflg){return;} if(max == 0){alert("メッセージ");return;} document.form1.para0.value = data; document.form1.para1.value = data2; document.form1.submit(); } 上記データをCGIページに送っているようです。 このJavaScriptから送信したデータはCGI側で正常に表示されているのですが、Perlスクリプトの改造でリンク元制限を行うと、送信元のページ情報をCGI側で読み取ることができていないようで、制限ができないようです。よくわかりませんが・・・ <A href="http://">link</a>からCGIへリンクした場合は、正常にリンク元制限が行えます。 document.form1.para0.value = data; document.form1.para1.value = data2; document.form1.submit(); この部分を変更すれば、リンク元ページ情報が正常に受信できるのではと考え、 http://pzxa85.hp.infoseek.co.jp/www/wwwjsfor.htm ↑ページ等の解説ページをみてみましたが、よくわかりませんでした。 JavaScriptは勉強したことがなく、Perlも入門者程度の知識です。わからないことだらけで、言いたいことが上手く伝えられませんが、出来るだけ調べて説明させてもらいますので、どうぞ宜しくお願いいたします。

  • ページ履歴を残すには?

    こんにちは。 1→2→3→4→5にページ履歴を残すようなスクリプトを作りたいと思い、いろんなサイトを見ていると、下記のようなスクリプトを見つけたのですが、 <head内> historyDelimiter = " → "; function addHistory(item) { var h = []; if(document.cookie != "") h = document.cookie.split(historyDelimiter); h.push("<a href=\"" + document.URL + "\">" + item + "</a>"); document.cookie = h.join(historyDelimiter); } function showHistory() { document.write(document.cookie); } <body内> <script type="text/javascript"> <!-- addHistory("1ページ"); showHistory(); //--> </script> これでやると、Windows XP IE6でしか表現されませんでした。 しかも履歴がどんどんと伸びていきます。 例えば、1→2→3→4→5まで行き2をクリックすと1→2みたいには出来ないのでしょうか? それとMacのFirefoxでの使用も多々ありますので、こちらでも表現できないものでしょうか? cgiやphpなどのプログラムが使用できないためjavascriptでやろうと思っているのですが、javascriptではなく他になにかいい手段はないでしょうか? ちなみにhtmlのページ数も400ページほどありますが、手作業で1ページずつ打っていったほうが無難でしょうか。

  • javascriptでCGIを実行するには

    htmlタグ <form method="post" action="・・・/cgi-bin/gogo.cgi"> <input type="text" name="name" size="20" value=""> <input type="submit" value="送信"> 上記で送信ボタンを押すとcgi側でnameを受け取れますが、 以下の場合はcgiは動作するのですが、nameを受け取れません、 受け取れる方法を教えてください。 <script type="text/javascript" language="javascript"> <!-- function gogo(){ document.write('<img src="・・・/cgi-bin/gogo.cgi">'); } // --> </script> </head> <body> <form method="post" action="javascript:gogo()"> <input type="text" name="name" size="20" value=""> <input type="submit" value="送信"> </form>

  • ページは表示されたけれど、エラーが出ます。

    過去の質問を調べたのですが、見つけられなかったので、質問させてください。 自社サイトのページを開くと、ステータスバーに 「ページが表示されましたが、エラーがあります。」と表示されました。 エラーの詳細は下記のとおりです。 ライン:18 文字:51 エラー:')'がありません コード:0 ソースに問題があるのかと思ったのですが、 下記がそのソースです。 <SCRIPT language="javascript" type="text/javascript" src="../js/common_lib.js"></SCRIPT> <SCRIPT type="text/javascript" src="../js/css_junction2.js"></SCRIPT> <SCRIPT language="JavaScript"> <!-- document.write("<img src='http://700700.jp/acc/acclog.cgi?"); document.write("referrer="+document.referrer+"&"); document.write("width="+screen.width+"&"); document.write("height="+screen.height+"&"); document.write("color="+screen.colorDepth+"' alt="">"); // --> </SCRIPT> どこをどう直せばよいのかよくわからないので、 もしお分かりの方がいらっしゃいましたら、 お教えいただけますでしょうか? よろしくお願いいたします。

  • Javascriptにてページ作成

    Javascriptを用いて、 1)以下を中央ぞろえ 2)太字・(HTMLでの)フォント6程度の「タイトル」 3)ページを開いた際の時間が30以下で「画像1」  30秒より後の場合は「画像2」を表示 4)3)の背景色を変更 5)最終更新日時を自動取得 といった条件を満たしたページを作成したいのです。 2)は検索して調べたところ、おおむね以下のような感じになると思います。 <script type="text/javascript"> <!-- dd = new Date(); mySeconds = dd.getSeconds(); myimg= '<img src="「画像1」" width= "x" height="y">'; myimg2= '<img src="「画像2」" width= "x" height="y">'; if(mySeconds<30){ document.write(myimg+"<br>"); }else{ document.write(myimg2+"<br>"); } document.write(dd.toLocaleString() +"<br>"); // --> </script> そして5)の日時自動取得は <script type="text/javascript"> <!-- document.write(document.lastModified); // --> </script> こんな感じになると思うのですが。 それ以外の条件を満たすJavascriptで、ぴんとくるものが見つかりません。 他の条件はHTMLで記述するべき(HTMLのほうが楽?)ことなのでしょうか? HTMLは基本的なことだけかじった程度の知識で、Javascroptというものに頭を悩ませています。 よろしくお願いします。