SubmitせずにAjaxからCGIを呼び出して結果をHTML上に表

このQ&Aのポイント
  • HTMLファイル上にテキストボックスとラベルのセットがあります。テキストボックスにコードを入力し、コードに対応する商品名をラベルに表示したい場合、Ajaxを使用してデータをCGIに渡し、サーバのDBに接続し結果を取得する方法を教えてください。
  • Submitせずにフォーカスが離れた場合に、テキストボックスの値をCGIに渡してサーバのDBに接続し、その結果をラベルに表示する方法を教えてください。初心者でAjaxの使い方がわからないため、具体的なコードの解説があると助かります。
  • HTML上にあるテキストボックスにコードを入力し、そのコードに対応する商品名をラベルに表示したい場合、どのように設定すればよいでしょうか?Ajaxを使用して非同期通信を行い、サーバからデータを取得する方法を教えてください。
回答を見る
  • ベストアンサー

「SubmitせずにAjaxからCGIを呼び出して結果をHTML上に表

「SubmitせずにAjaxからCGIを呼び出して結果をHTML上に表示したい」 HTMLファイル上にテキストボックスとそれと対になるラベル(ラベルじゃなくても良いのですが。。)のセットがいくつかあります。 テキストボックスにコードを入力したら、ラベルにそのコードに対応する商品名を表示したいと思っています。 テキストボックスにコードを入力後、フォーカスが離れたら(Onchangeで)Ajaxでそのコードの値を取得し、そのデータをCGIに渡してサーバにあるDBに接続し、その結果をHTML上のラベルに表示したいと思います。 Sbmitせずにフォーカスが離れた場合に、データをCGIに受け渡し、そのデータを画面遷移しないで、HTML上に表示するのはどのようにすればいいのでしょうか。 Ajaxを使えばいいと教わったのですが、色んなサイトを調べてみたのですが、Ajaxが初心者で、よくわからず、コードなどございましたら教えて頂けましたら嬉しいです。 よろしくお願い致します。

noname#223023
noname#223023
  • AJAX
  • 回答数3
  • ありがとう数20

質問者が選んだベストアンサー

  • ベストアンサー
noname#111181
noname#111181
回答No.3

> Prototype より、jQuery の方を使った方が良いのでしょうか。 いまはjQueryの方が普及しており、さまざまなスクリプトが入手できます。お勧めです。

noname#223023
質問者

お礼

i80286さん ありがとうございました。 jQueryの方で挑戦してみます! またつまづくことがあるかと思いますが、よろしくお願い致します!!

その他の回答 (2)

noname#111181
noname#111181
回答No.2

Ajaxの非同期通信を使うわけですが、ブラウザによってインプリメントに若干の差異があります。 そこで、「jQueryのダウンロード」(http://semooh.jp/jquery/ref/cont/tutorial/)を参考にjQueryを入手して下さい。 また、非同期通信の方法は「jQuery 非同期通信を行う」(http://www.openspc2.org/JavaScript/Ajax/Ajax_study/chapter21/006/index.html)をご覧下さい。

noname#223023
質問者

お礼

i80286さん ありがとうございました。 素人質問で申しわけございませんが、私の質問内容からですと、Prototype より、jQuery の方を使った方が良いのでしょうか。 教えて頂けましたら幸いです。

回答No.1

amazon等でAJAX入門 関係の本を一通り見て、評価が高い本を書店などでご覧頂くことをお勧めします。  参考URLに簡単なサンプルも載っています。

参考URL:
http://www.openspc2.org/JavaScript/Ajax/jQuery_study/ver1.2.6/index.html
noname#223023
質問者

お礼

scorpion2009さん ありがとうございました。 そうですね、そのようにしてみます。

関連するQ&A

  • 「SubmitせずにJavaScriptからCGIを呼び出して結果をH

    「SubmitせずにJavaScriptからCGIを呼び出して結果をHTML上に表示したい」 HTMLファイル上にテキストボックスとそれと対になるラベル(ラベルじゃなくても良いのですが。。)のセットがいくつかあります。 テキストボックスにコードを入力したら、ラベルにそのコードに対応する商品名を表示したいと思っています。 テキストボックスにコードを入力後、フォーカスが離れたら(Onchangeで)JavaScriptでそのコードの値を取得し、そのデータをCGIに渡してサーバにあるDBに接続し、その結果をHTML上のラベルに表示したいと思います。 Sbmitせずにフォーカスが離れた場合に、データをCGIに受け渡し、そのデータを画面遷移しないで、HTML上に表示するのはどのようにすればいいのでしょうか。 また、上記のことをJavaScriptとCGIだけでできるのでしょうか。 教えてください。 よろしくお願い致します。

  • AjaxからCGIへの接続につきまして、教えてください。

    AjaxからCGIへの接続につきまして、教えてください。 HTML上のtcdという名前のテキストボックスに入力された、データをテキストボックスのID名と、入力データをCGIに渡して戻り値をHTMLに反映させたいのですが、まずはAjaxからCGIへデータ渡すときに、下記のように記述しているのですが、「アクセスが拒否されました」というエラーがでて、CGIに接続できないみたいなのです。 HTMLもAJAXのファイルも、CGIも同一ドメインにおいてあります。 function ajaxcgi(tcd) { $.get('CGIのURL', {cd: tcd.name, name: tcd.value}, cgiajax); } function cgiajax(message, status) { alert(message + "\n" + "status:" + status); } テストでAlertを使って試したら、tcdテキストボックスの名前も入力データも取得できています。 下記URLを参考にさせて頂きました。 http://www.s-memo.net/blog/2006/12/jquery.php もちろんCGIのURL間違いではありません。 CGI側も、テキストを出すだけにしているのですが、その出力もできないみたいです。 これはどのような原因が考えられるでしょうか。 おわかりの方いらっしゃいましたら教えてください。 よろしくお願い致します。

    • ベストアンサー
    • AJAX
  • CGI→AJAXへ配列の受け渡しは可能でしょうか

    CGI→AJAXへ配列の受け渡しは可能でしょうか AJAX→CGI→DB→CGI→AJAXでデータの受け渡しを考えています。 CGIでDBからデータを受け取ったあとに、AJAXでデータを加工後、HTMLにDBからのデータを表示したいと思っています。 初心者的な質問で申しわけございませんが、CGIからAJAXにでデータを渡すときに、配列の形式で渡すことはできるのでしょうか。 配列のまま渡してAJAXでデータ加工したいと思うのですが、うまくできないので、そもそもできるかどうかお聞きしたいと思いました。 例えば、  &Jcode::convert(\@data,'utf8'); print @data; このようにしてみましたが、ダメでした。 テキストでしか受け渡しができないのでしょうか。 ご存じの方いらっしゃいましたらお願い致します。

    • ベストアンサー
    • AJAX
  • Ajax&CGI

    Ajax勉強中の者です。 勉強のために簡単なAjaxプログラムを作成しているのですが、早速上手くいかず困っているので質問させて頂きます。 ※ソース等は手元にないのであまり詳しい状況は説明できないかもしれませんが・・。 実現したいことはテキストボックスがあり、そこにIPアドレスを入力しボタンを押すとサーバへ入力した値を送信し、サーバ側では送信された値を受け取りいろいろ処理をした後にクライアントへレスポンスし、クライアントで表示する みたいなことをやりたいのですが(説明下手ですみません・・)。 サーバ側はCGI(Perl)で作成しており、処理は簡単に説明するとクライアントから受け取ったIPアドレスでPingを打ってその結果をクライアントへ返すみたいな感じなのですが、上手く動作せず困っています。 PerlではNet::Pingモジュールを使ってIPアドへPingを実行しています。エラーの内容ですがXMLHttpRequestのstatusは500(サーバー内部エラー)となっており、”エラーを特定できません”と表示されます。 使用しているWebサーバはApacheですがこれは自分がテスト用PC(Linux)へインストールしたもので、もしかしたらサーバ構築に問題があるのかなぁ~なんて不安にもなっています。 テキストボックスに入力したIPアドをサーバで受信し、ブラウザにAjaxで”入力されたアドレスは~です”と表示させたりは動作したのですが・・。 また、Apacheの設定で拡張子.plをCGIとして扱わないようにすると(httpd.confファイルのAddHandlerへ.plを追記しない)サーバの処理結果でなくソースが丸ごと表示されてしまい困っています・・。 ただ拡張子.plをCGIとして扱うと処理結果がレスポンスされます。 この現象についてもどなたか原因を説明して頂けると感謝です。 原因&解決方法など分かる方はぜひご教授ください。 よろしくお願い致します。

  • Ajax⇒CGI

    JavaScriptは結構知ってますが、 AjaxとPerlに関しては初心者のものです。 早速ですが質問です。 Ajaxで送信したデータをCGI(Perl)で処理して、 サーバーのテキストに保存する方法が良く分かりません。 サーバーはCGIを許可しているところを使っています。 どなたか詳しい方、ご教授お願いします!

  • perl/cgiについて、教えて下さい。

    perl/cgiについて、教えて下さい。 行いたい事ですが、 1:a.html(テキストボックスとsubmitボタンがあるだけです) 2:b.html(テキストボックスとsubmitボタンがあるだけです) 3:c.html(1,2のテキストボックスの内容を表示するだけです。) 4:x.cgi があります。4のcgiにはまだ何も記述していませんが、1,2のテキストボックスで入力した値を c.htmlに表示させたいと考えています。 又、c.htmlで値を変更すると、1,2のテキストボックスの値も連動して変わるようにしたいです。 例)a.htmlのテキストボックスで「13」と入力してsubmitボタン押下。c.htmlに「13」が表示される。 c.htmlで「13」を「22」に変更すると、a.htmlのテキストボックスの値も「22」になるといったイメージです。 どうぞ、宜しくお願いいたします。

    • ベストアンサー
    • CGI
  • CGI→HTML テキストボックスへの自動入力

    お世話になります。 CGIで出力したWEBの画面から純粋なHTML画面へ遷移した際、同時にHTML側のテキストボックスへ文字列を入力したいと考えておりますが可能でしょうか? ※意味がわかり辛い場合などは、補足説明します。 よろしくお願いいたします。

    • 締切済み
    • CGI
  • Jquery.ajaxでHTML読み込み

    現在、Jquery.ajaxを使って外部HTMLの読み込み処理を行い、処理完了後にフェードで表示させるということをしているのですが、読み込んだHTMLに貼り付けてある画像が読み込まれる前にHTMLが表示されてしまい、困っています。 Jquery.ajaxでは内包されている画像の監視まではできないのでしょうか? 下記が今作っているコードです。 $contest.css({ "opacity": 0 }); $.ajax({ type: "GET", url: "hoge.html" dataType: "html", success: function(data) { $contest.html($(data).find("#hoge")); }, complete: function() { $contest.stop().animate({ "opacity": 1 }, 1000, "easeOutCubic"); } }); おわかりになる方、ご教授お願いします。

  • VBのフォーカスの移動について教えてください

    はじめたばかりの初心者ですが、よろしくお願いします。 商品名の一覧のリストボックスを表示し、商品コードを入力するテキストボックスと商品名を表示させるラベルをそれぞれ三つづつ用意し、テキストボックスへ商品コードの入力、またはリストボックスの商品名のクリックでラベルに商品名を表示するようにしたいのですが、まず最初にテキストボックス1にフォーカスを移します。そしてそこでリストボックスの商品名をクリックすると、そこにフォーカスが移ってしまいます。 リストボックスをクリックしたあと、自動的に元のテキストボックス1 (元のフォーカスがテキストボックス2にあったときにはテキストボックス2に) にフォーカスを戻すにはどのようにすればいいのでしょうか。 サンプルコードで教えて頂けたら有難いのですが。

  • アプレットからCGI/HTMLを呼び出すには

    Javaアプレットで作成された変数をCGI/HTMLに渡して、それを呼び出すことは可能でしょうか?アプレットで入力されたデータをCGIを使用してDB登録および各種加工し、その結果を画面表示したいのですが、どのようにすればいいかわかりません。 どうぞよろしくお願いいたします。