--/-- --

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

08/28 2009

JqueryでAjax!CGIを通過後、ページ遷移なくHTMLを変化させる方法

ブログでコメントを記入したり、お問い合わせフォームに記入する場合、【送信】ボタンを押すと、通常はページが遷移します。でも、ウェブサイトのデザインによっては、CGIプログラムを稼動させながらも、イベント発生後に新しいページに飛ぶことなく、入力ページに戻ってきてほしい場合があります。それは技術的に言えば、Ajaxを駆使するということです。幸い、JQueryを使用すれば、かなりスマートに実装できます。

HTML側

<form method='post' action='write.cgi' id='action'>
    <input type='text' id='answer1' name='ans1'>
    <input type='text' id='answer2' name='ans2'>
    <input type='submit' value='submit'
</form

  • id=actionのformで、write.cgiに送信するとします。methodはCGIのプログラムにあわせて、postもしくはgetにしてください。とはいえ、これはあくまでjavascriptが無効の場合にイベント発生するだけです。
  • 入力内容が2つある場合を想定します。それぞれの入力内容にidをつけて下さい。


Javascript側

$('form#action').submit(function(ev) {return jesus()});
function jesus() {
    $.post('write.cgi',
            "ans1="+$('#answer1').val()+"&ans2="+$('#answer2').val(),
            read);
    return false;
}
function read(Txt){
    data    = Txt.split('&');
}            

  • イベント発生時に最初のプログラムが実行されます。最初のプログラムは2つ目のプログラム(jesus())を実行します。
  • jesus()の中の$.post('・・・というのが今回のミソです。これは第一因子で指定したCGIに、第二因子で指定したデータを送信し、CGIからの返信を第三因子で指定したjavascriptによって受け取る関数です。
  • HTML側のactionとは異なり、送信するデーターを第二因子として指定しなければいけません。2つのinputからそれぞれのvalueとnameを拾い、&と=によってつなげたデータを作成します。
  • 第三因子で指定された3つ目のプログラムに、CGIからのデータ(下のCGIの場合はANS1&$ANS2)が帰ってきますので、今回の場合は&でsplitした2つの配列として受信します。受信したデータはHTMLでAjaxに自由に使えます。

CGI側(例としてPerl)

#! /usr/bin/perl

# 自由なプログラミング

print "Content-type: text/plain\n\n";
print "$ANS1&$ANS2";

  • CGIから返すデータはテキスト形式ですから、Content-type: text/plainとしましょう。HTMLタグ入りデータを返すことも可能です。

実装例

カルバリの丘教会の礼拝メッセージへのレスポンスページにて実装例がありますので、ご利用になってみて下さい。クイズへの応答、キャラクターレーダーへの投票を行うと、ページの遷移なく結果が表示されます。もちろんCGIを通過してデータ化されています。

 この技術は、ログを取りながらのリアルタイムチャットなど、ユーザーにページ遷移のストレスを与えない、それでいてCGIチックなHTMLページを作るのに重宝しますので、ご利用になってみて下さい。JQueryを読み込むことをお忘れなく!


blog comments powered by Disqus
このページのTOPへ
聖書リスニング
DTメンバー募集(無料!)

Devotion Timeのメルマガメンバーになりませんか!メンバー限定企画もあり!ご希望の方はメールアドレスを入力して下さい。(さらに詳しく >>)

Profile

ブロガー: 西原智彦
1972年広島生まれ。ロボットが好きで工学修士に(1996)。聖書に惚れ込み、実践神学修士に(2005)。(さらに詳しく >>)

カテゴリ
お問い合わせフォーム

個人的な感想、ご質問にどうぞ

お名前(ハンドルネームOKです):
メールアドレス:
件名:
本文:

Copyright © Devotion Time All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。