CGI（Perl）で、Javascriptを用いWEBアプリケーション

質問

CGI（Perl）で、Javascriptを用いWEBアプリケーションを作成しています。
やりたいことは、親子関係（2階層）の２つのプルダウンの作成です。
親のプルダウンを選択すると、
子のプルダウンのリストの内容が、絞り込まれるようにしたいのです。
コマンドボタン（<INPUT type="button"・・・）でsubmit()を使うとうまくいったのですが、
画面全体がリフレッシュされるため、他の入力中の項目がクリアされてしまいます。
javascriptを使って解決したいのですが、行き詰っています。
どうかお知恵をお貸しください。宜しくお願いします。

なお、２つ（親子）のプルダウンのアイテムリストは、
mdbファイル(db1.mdb)で２つのテーブルで用意して、
SQL（select文）で呼び出すようにしてます。

２つのテーブルは、以下のような感じです。
talbe1（親用）
==========================
kuni
------------------------
日本
米国
中国
　：
==========================

talbe2（子用）
==========================
kuni toshi
------------------------
日本 東京
日本 横浜
日本 名古屋
日本 大阪
米国 ワシントン
米国 ニューヨーク
米国 ロスアンゼルス
中国 北京
中国 上海
　： 　：
==========================

なお、submitを使ってうまくいった時のソース（aaa.cgi）は、
以下のような感じです。

＜aaa.cgi＞
↓=====================================================
　：
$oya=$input_data{'oya'};
<FORM name="form1" method="POST" action="aaa.cgi">
<SELECT name="oya">
EOM
$rs = $db->Execute("SELECT table1.kuni FROM table1");
while (!$rs->EOF) {
print "<OPTION>",$rs->Fields('kuni')->Value,"\n";
$rs->MoveNext;
}
print <<EOM;
</SELECT>
<INPUT type="button" value="→" name="sub1" onclick="submit();">
<SELECT name="ko">
EOM
$rs = $db->Execute("SELECT table2.toshi FROM table2 WHERE (((table2.kuni)=$oya))");
while (!$rs->EOF) {
print "<OPTION>",$rs->Fields('toshi')->Value,"\n";
$rs->MoveNext;
}

print <<EOM;
</SELECT>
　：
↑=====================================================

よろしくお願いします。

回答No.4

yyr446 · ベストアンサー

サブミットで更新の話は聞いてなかった物で、．．．
サブミットは使えませんね。（別のフォームにしない限りは）
となると、やはりサブミットとは別途のAJAXリクエストしか
ないような気がします。

回答No.5

think49

IE依存ですが、ご参考までに。

JavaScript初心者入門講座: Step3・データベースに接続
http://java-script.seesaa.net/category/3196594-1.html
Microsoft JScript での ADO コードの例
http://msdn.microsoft.com/ja-jp/library/cc408217%28v=MSDN.10%29.aspx

しかし、リモートのDBにJavaScriptで接続しにいける仕様は普通考えられません。
誰でも任意のSQLクエリを発行できるってことは大変なリスクを伴います。

ですので、内部的にSQLクエリを発行するとしても、何らかのサーバサイド技術を介してJavaScriptで扱いやすいフォーマット(JSON, XML等)に変換してもらってから取得するのがいいと思います。

お礼

ご回答ありがとうございます。

＞DBにJavaScriptで接続しにいける仕様は普通考えられません

ＤＢへの接続は、Perlで行っているのですが、そういう意味ではないのでしょうか。
また、私の誤解でしょうか。

いずれにしても、SQLのセキュリティについては考えてませんでした。
私の知識不足というのもあるのですが、
今回の環境は、部署内の閉じたLANでのシステムなので、
セキュリティを甘く考えていたこともあります。
しかしながら、SQLが誰でも発行できるとは、知りませんでした。もっと勉強します。

回答No.3

yyr446

「できれば、「ajax」以外で解決したいのですが。」
となると、JSONPアクセスとか、ダミーのIFRAME要素を使った
変形JSONPアクセスとかがありますが、かえって面倒なような．．．
　（ちなみにXHR＝XMLHttpRequest＝AJAXの事です。）
変形JSONPアクセスとは、
<iframe name="dumy" id="dumy" width="0" height="0">
をこっそり、作っておきます。
formのtarget属性でtarget="dumy"を指定してサブミットした
結果がdumyに表示(実際は見えない)されるようにします。
dumyのonloadのイベントで、dumyのdocumentを辿って目的の要素を
取得して、セレクトボックスを置き換えるとか、HTML5のpostMessage()で送る。

あるいは同じ手口で、cgiがHTMLを書き出すのでなくjavascript(MIME:text/javascript)
を書き出し、iframe内から予め作っておいたcallback用の関数を
parent.callback({});
で{}でデータを渡して呼び出す（もろにJSONP）とか。

補足

再びのご回答、重ねて御礼申し上げます。
「変形JSONPアクセス」というのも、初めて知りました。

「formのtarget属性でtarget="dumy"を指定してサブミット」ということは、
submit()を使って、「<form>・・・</form>」内の全ての値を、
一旦、ダミーフレームに渡すということなのでしょうか。
誠に申し訳ございませんが、また説明がもれていましたが、
このフォームには「登録」というコマンドボタンもあって、
それが押されるとサブミットして、<form>内のデータがデータベース(mdb)に更新されるようにしているのですが、
このときのサブミットとの使い分けはどうするのでしょうか。（私の勘違いでしょうか。）

本当に、初歩的な質問ばかりで申し訳ございません。
もっと簡単に、<SELECT name="oya">で選択した値が変数$oyaに代入でき、
この変数$oyaを元に、SQL文のWHEREで、<SELECT name="ko">のリストの絞込みができるのかのと思っていました。

いずれにしても、もう少し、私自身が勉強してから質問した方が良い見たいですね。
本当にありがとうございました。

回答No.2

tenderfeel

セレクトメニューならonchangeで選択時に実行されます。
<select onchange="hoge()">

＞submit()を使うとうまくいったのですが、画面全体がリフレッシュ

submit()は普通にsubmitボタンを押してフォームを送信するのと変わらないので、リフレッシュしてしまうのは仕方ないです。

ページを遷移させずに裏でこっそりサーバーと通信するにはXHRというのを使います。

http://allabout.co.jp/internet/javascript/closeup/CU20050515A/

URLのサンプルにあるrequestFileという関数に渡している引数を見ると

requestFile( '' , 'GET', './test.txt' , true )
　→　requestFile( 送信するデータ , method , action , 同期か非同期か )

CGIとの通信する時の情報が普通にフォーム送信するのとだいたい同じなのがわかると思います。
なのでactionで指定されたCGIの処理は普通のフォームとやり取りするのと同じです。
サンプルは送信データ部分が空になってますが、日本語を含む場合はURLエンコードが必要です。
データを受け取る側のCGIは返す値をprintとかechoで出力するだけです。

色々書きましたが今XHR使う時は、サンプルのようなソースをイチから書くより
ライブラリを使う人が多いんじゃないかと思います。

参考URL：

http://jsgt.org/ajax/ref/test/json/getpost/test3.htm

補足

ご回答、誠にありがとうございます。
申し訳ございません、ajaxについては、全く知りませんでした。
tenderfeel様のご指示のとおり、参考サイトなどを調べてみたのですが、
まだよく理解できていません。

例えば、
<select name="oya" onchange="hoge()">
として、

function hoge(){
}
の中身に、
http://allabout.co.jp/internet/javascript/closeup/CU20050515A/
のサンプルのコードを書けばよいのでしょうか。

その場合、
requestFile( 送信するデータ , method , action , 同期か非同期か )
の「送信するデータ」、つまり「oya」で選択した値の記述方法はどうなるのでしょうか。

また、今回の質問の場合、送る側のcgiと受け取る側のcgiは同じ、
つまり、同じ画面を開くのですが、
その場合、「printとかechoで出力するだけです」の記述方法はどうなるのでしょうか。

大変、初歩的な質問で誠に恐縮ですが、宜しくお願いします。

回答No.1

yyr446

＜画面全体がリフレッシュされるため、他の入力中の項目がクリアされてしまいます。＞
レガシーな手法だと、クッキーとかセッション変数とかを使ってCGI側で再セットして
出力なんでしょうが、javascript使っていいならAJAXが使えると思います。

cgiはoyaを受け取ってkoの<select>部分のみを出力するCGIを作って下さい。
ボタンのクリックでサブミットするのでなく、AJAX通信で、oyaをPOSTします。
レスポンスのテキストを受け取って、javascriptのDOM操作で、新しい
セレクトボックスを作るようにします。

具体的には、XMLHttpRequestで探すと例が見つかると思います。

参考
http://wiki.paulownia.jp/ajax

補足

ご回答、誠にありがとうございます。
大変申し遅れましたが、
「ajax」については全く存じ上げなく、
今回の質問の件でも、サイトを検索すると、何度か「ajax」での解決方法が書かれていましたが、
読んでもよく分からなかったので、スルーしていました。
できれば、「ajax」以外で解決したいのですが。
宜しくお願いします。
（なお、これを機会に、今後「ajax」について、少しずつ勉強していきたいと考えております。）