Ajaxでウインドウ出力について

CGI上で、HTMLのコードを書いて、WEBページを出力（表示）することが出来ますが、それと同じようなことが、Ajax（Jqueryを使っています）で出来ませんでしょうか。

CGIを使ってやろうとしていたのですが、同じページでFormタグを多用しており、CGI以外の方法でページ出力をしようと思います。

HTMLからOnClickで値をAjaxに渡して、データベースとやりとりをし、Ajaxに値を戻してそれを元にページを作成して出力をさせたいのです。（別ウインドウを立ち上げで）

このようなことは出来ますでしょうか。
また、出来るようでしたらどうやってプログラムを作成すればいいでしょうか。

教えてください。よろしくお願いいたします。

No.5 ベストアンサー 回答者： kawai985 回答日時： 2012/01/30 15:07

http://beauty.geocities.jp/nishihama985/on-off-d …
たとえば一例ですが　
ページ内に表示領域を作って表示すれば
同一ページ内でも　元データをくずさずに表示できます
ＯＮ／ＯＦＦを押すと　DIV要素が表示されます

AjaxでTXTデータを表示できます
DIV要素などで表示領域を用意して表示
という形でできます
分かりにくい時は再質問を

この回答へのお礼

kawai985さん

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

そうですね。DIVを使って、対応したいと思います。そのような構成でしたら出来ると思います。

ありがとうございました。
また何かありましたらよろしくお願いいたします。



LancerVIIさんもお忙しい中ありがとうございます。
あまり時間をかけられないので、上記の方法で試してみます。
しばらくは回答を締め切らないでおいておきますね。

お礼日時：2012/01/31 09:01

No.6 回答者： LancerVII 回答日時： 2012/01/31 11:59

こんにちは。

遅くなりましてすいません。
わざわざ待っていただきありがとうございました。

簡単なサンプルになりますが用意してみました。

http://hppg.moe.hm/okwave/sample/

更新までは実装出来ていませんが、一覧を表示する画面内で詳細データみたいなものをAjaxで取得し、動的に表示します。

本来なら「更新」ボタンを押した時点でサーバへ送信し、データの更新をします。

こんなかんじにすると一覧表示画面で送信されるデータと詳細のデータについてわけて更新できますが、画面は一つで済みます。

ちょっと急いで作ったので効率化とかあまり考えていません。
参考程度にご覧いただければと思います。

この回答へのお礼

LancerVIIさん

お忙しい中ありがとうございました！

サンプルページを拝見させて頂きましたが、とってもかっこいい！ステキなサンプルをありがとうございました！！

ぜひ参考にさせて頂きます！

ありがとうございました！

また何かありましたらよろしくお願いいたします！

お礼日時：2012/02/02 08:50

No.4 回答者： kawai985 回答日時： 2012/01/30 10:40

http://note.chiebukuro.yahoo.co.jp/detail/n15842
http://beauty.geocities.jp/nishihama985/jquery-t …
Ajaxのサンプルです　データベースはTXTではだめでしょうか

この回答へのお礼

kawai985さん

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

早速サンプルの方を拝見させて頂きましたが、こちらのサンプルはボタンがあるページと同じページ内に呼び出した結果を表示させるものだと思うのですが、

イメージしている状況が、数百行ある表の、ある1行に修正ボタンを置き、それをクリックすると、その1行が編集モードになって別ウインドウで立ち上がり、修正して更新ボタンを押すと、元の数百行あるページも更新されるというイメージです。

元のページの表の行数が大きいので、出来たら別ページを立ち上げて処理をしたいなあと思っているのですが、そのようなことは難しいのでしょうか・・・。

データベースはCGIから呼び出していますので、結果はテキストになります。

お礼日時：2012/01/30 12:57

No.3 回答者： LancerVII 回答日時： 2012/01/27 11:35

こんにちは。

>今回の件ですと、同じHTMLページ内で、Formタグを使ってCGIを呼び出していることが他にもあり、
表の行全体を更新するフォーム内に行ごとのボタンを用意したいから問題が起きているということでしょうか。

>ボタンを押す→Ajaxで値をとる→PerlでDB接続→値に基づいて行の内容を全部取得→
>新しくウインドウを立ち上げて内容をテキストボックスと一緒に表示→
>テキストボックスに表示したものを取得し、DBに登録しなおす（こちらはFormタグでPerl処理でやります）

無理にAjaxを使う必要が見当たらないのですがいかがでしょうか。
ボタンを押す→新しいウィンドウを開く→そのウィンドウに対してパラメータをpost→
xxx.cgiにてDB接続し、値を元に入力ページを表示→そこで入力された内容でDBを更新→サブウィンドウを閉じる→
一覧ページを更新する

マスタメンテ画面をイメージした場合私ならサブウィンドウは開かずに処理します。
ボタンを押す→隠してある入力フィールドと更新ボタンを表示→
更新ボタンを押す→Ajaxにてxxx.cgiにpost→xxx.cgiで更新処理→
更新処理後に戻ってきた値を利用して表に反映→入力フィールドを隠す

どうせAjaxを使うならページの遷移を極力なくします。

>JSON、XML、PHPは使ったことがないので、よく分からないのです
扱いやすい物で戻してあげれば良いわけですのでこれじゃないとだめということはありません。
ただしAjaxを利用していくのであればJSONくらいは扱い方を知っておくと便利ですよ。
サーバサイドの言語も別にPHPじゃなくていいです。

上のような動きで想定があっているかつ少し時間をいただければサンプルを提示します。
違うイメージであれば補足下さい。
サンプルを作れる範囲であれば作ってみます。

この回答へのお礼

LancerVIIさん

ありがとうございます！！

このページ内には行ごとにFormタグを使用するだけならいいんですが、その表のヘッダー部分（1行目）と、表（数百行あります）全体にかかるFormタグがあるため、重なってしまってうまく動作していないように思います。

はい、Ajaxを使わなくてもいいのですが、私の能力ですと、Formタグが使えないとするとAjaxかなあという安易な考えです(笑

＞　隠してある入力フィールドと更新ボタンを表示

というのは、元々HTMLに埋め込んでおいて、それを表示したり隠したりすると言うことでしょうか？

JSONは扱えた方がいいのですね。はい、今後の課題にします。
時々見かけたりするので、私にも出来るかなあと眺めていたりしたのですが、難しそうで、とりあえず使っていない状態です。
これから頑張ります。

恐らくイメージと合っていると思います。
サンプルを作ってくださると言うことで本当にありがとうございます！！
よろしくお願いいたします！！

お礼日時：2012/01/27 12:07

No.2 回答者： LancerVII 回答日時： 2012/01/27 09:59

こんにちは。

>HTMLからOnClickで値をAjaxに渡して、データベースとやりとりをし、Ajaxに値を戻してそれを元にページを作成して出力をさせたいのです。（別ウインドウを立ち上げで）
>PHPやJSONを使わないと今回のような状況は出来ませんでしょうか。。

データベースに接続する要件がある限りperlでも良い(ぶっちゃけDBと接続できれば何でも良い)ですがサーバ側での処理は必要です。
(データベースに接続して値を取得する必要があるため)
PHPでサンプルを提示している意味は特に無く(開発環境が手元にあったため)サーバ側でHTMLまたはJSON、XMLでも良いですし、何らかの値を返せればそれを元に新しいウィンドウを立ち上げることが出来ます。

サンプルの「ウィンドウ起動」は難しいことはやっていなく、サーバ側から返ってきた文字をそのまま新しいウィンドウで開いているだけです。

>CGIを使ってやろうとしていたのですが、同じページでFormタグを多用しており、CGI以外の方法でページ出力をしようと思います。

実際どのような動きを想定（実現したいこと)しているか補足いただければもうちょっと踏み込んでアドバイスできると思います。

この回答へのお礼

LancerVIIさん

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

今の私の能力ですと、HTMLからPerlを使ってDBとやりとりをし、その結果からページを出力したり、HTMLからAjax（Jquery）からPerlでDBとやりとりし、その結果に基づいてHTMLの構成を変えて出力したりなどのことは出来ます。

今回の件ですと、同じHTMLページ内で、Formタグを使ってCGIを呼び出していることが他にもあり、重なってしまって、Formタグがうまく動作しないため、
Formタグ以外の方法でDBとやりとりをし、その結果を用いて、HTMLページ出力をしたいと考えています。

例えば、表があって、その行ごとにボタンを置き、そのボタンを押すと、その行の内容を新しくウインドウを立ち上げてテキストボックスと一緒に表示し、テキストボックスに入力して修正したらそれをDBに登録し、元の表に反映させると言うことをしたいです。

イメージでは
ボタンを押す→Ajaxで値をとる→PerlでDB接続→値に基づいて行の内容を全部取得→新しくウインドウを立ち上げて内容をテキストボックスと一緒に表示→テキストボックスに表示したものを取得し、DBに登録しなおす（こちらはFormタグでPerl処理でやります）

ただ、JSON、XML、PHPは使ったことがないので、よく分からないのです。。

よろしくお願いいたします。

お礼日時：2012/01/27 10:27

No.1 回答者： LancerVII 回答日時： 2012/01/26 18:24

こんにちは。

データベースから値を取得したものをJSONで返してあげても良いですし、HTMLを返すようにしてあげても良いと思います。

>CGI上で、HTMLのコードを書いて、WEBページを出力（表示）することが出来ますが、それと同じようなことが、Ajax（Jqueryを使っています）で出来ませんでしょうか。
>CGIを使ってやろうとしていたのですが、同じページでFormタグを多用しており、CGI以外の方法でページ出力をしようと思います。
同じようかどうかは微妙なところです。
データベースとのやり取りがあるのでどちらにせよ何らかのサーバ側の技術は必要になります。

以下PHP環境が必要ですがサンプルです。
PHP側でのセキュリティ等は考慮していません。最低限の動作サンプルです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Ajaxでウィンドウ出力について</title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">google.load('jquery','1');</script>
<script type="text/javascript">
$().ready ( function() {
$('button:eq(0)').click ( function() {
// サーバ上より非同期通信でHTMLデータを取得してウィンドウを開く
var win = null;
$.post (
'q7267928_1.php',
{ val : $('input:eq(0)').val() },
function ( data ) {
win = window.open ( '', 'newWin', 'width=600,height=300' );
win.document.write ( data );
win.document.close();
}
);
});
$('button:eq(1)').click ( function() {
// サーバ上より非同期通信でJSONデータを取得してウィンドウを開く
var win = null;
$.getJSON (
'q7267928_2.php',
{ val : $('input:eq(1)').val() },
function ( data ) {
win = window.open ( '', 'newWin', 'width=600,height=300' );
win.document.write ( '<html>' );
win.document.write ( '<head><title>' + data.title + '</title></head>' );
win.document.write ( '<body><h1>' + data.title + '</h1>' );
win.document.write ( '<p>data1 = ' + data.data1 + '文字</p>' );
win.document.write ( '<p>data2 = ' + data.data2 + '</p>' );
win.document.write ( '</body></html>' );
win.document.close();
}
);
});

});
</script>
<style type="text/css">
</style>
</head>
<body>
<input type="text" />
<button type="button">ウィンドウ起動</button><br />
<input type="text" />
<button type="button">ウィンドウ起動(JSON)</button>
</body>
</html>

==== q7267928_1.php
<?php
$val = $_POST['val'];
header ( 'Content-Type: text/html; charset=UTF-8' );
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>新規ウィンドウ</title>
</head>
<body>
<h1><?= $val ?></h1>
</body>
</html>

==== q7267928_2.php
header ( "Content-Type: application/json; charset=UTF-8" );
$array = array();
$array['title'] = $_GET['val'];
$array['data1'] = mb_strlen($_GET['val']);
$array['data2'] = date('Y/m/j H:i');

print json_encode ( $array );
?>

この回答へのお礼

LancerVIIさん

ご回答ありがとうございました！！

ですが、申し訳ございません。
CGIはPerlを使っているのと、JSONは使ったことがないため、せっかく教えて頂いたコードが全く分からない状態です。。(泣

PHPやJSONを使わないと今回のような状況は出来ませんでしょうか。。

お礼日時：2012/01/27 08:22