jQuery,Ajaxでcgiに接続する方法がわからなくて困っています

2023/10/18 08:30

このQ&Aのポイント

jQueryとAjaxを使ってcgiに接続する方法が分からず困っています。データベースのテーブルを参照し、フォームに入力された文字にマッチする情報をselectボックス内で表示したいです。
selectボックス内に表示される情報を絞り込むために、Ajaxを使用してcgiに接続したいです。現在はうまく機能しないため、参考になるURLやサンプルソースを探しています。
特定のデータベースのテーブルに格納されている情報を表示するためのフォームを作成し、フォームに入力された文字に一致する情報をselectボックス内に表示したいです。現在の実装ではうまくいっていないため、jQueryとAjaxを使ったcgiへの接続方法を学びたいです。

ベストアンサー

jQuery,Ajaxでcgiに接続する方法がわからなくて困っています

2010/04/28 16:25

jQuery,Ajaxでcgiに接続する方法がわからなくて困っています。あるデータベースのあるテーブル（仮にpersonテーブル）を参照して、html上のformタグに文字を入れるとselectボックス内に表示されるものがマッチしたものが表示されるようなものを作りたいと思っています。例えば、 personテーブルのperson_nameカラムには（秋本、本田、寺西、寺本、戸田、吉岡）という情報が入っていて、selectボックス内は最初全ての人名が出ているとします。 person.htmlというテンプレートのformのところに【寺】と入力するとselectボックス内は寺西と寺本だけ表示される。そのようなものを作りたいと思っていますがうまくいきません。何か参考になるＵＲＬだけでもかまいませんのでご教授下さい。できればサンプルソースがあればうれしです。

keeeeeeeen
お礼率56% (160/282)

AJAX
回答数2
ありがとう数19

みんなの回答 （2）
専門家の回答

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

ベストアンサー

yyr446
ベストアンサー率65% (870/1330)

2010/04/30 18:21 回答No.2

とりあえずjQueryのサンプルです。（cgiがperlでなくPHPで申し訳ない） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja-JP"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript" charset="utf-8" src="/jslib/jquery-1.4.2.min.js"></script> <script type="text/javascript" charset="utf-8">  </script> <body> <body> <form> <input id="search_name" type="text" value=""> </form> <select name="person" id="person"> <option value="秋本">秋本<option value="本田">本田<option value="寺西">寺西 <option value="寺本">寺本<option value="戸田">戸田<option value="吉岡">吉岡 </select> </body> </html> cgi(PHP)側のサンプル <?php header("Content-type:text/javascript"); mb_language("japanese"); mb_internal_encoding("UTF-8"); mb_http_output("UTF-8"); if(isset($_POST['search_name'])){ /* ここにDB検索処理を記述「$_POST['search_name']をキーにして読み込んだデータを配列変数$dataに格納する。」 */ $data= array("寺西","寺本"); //テスト用サンプル echo json_encode($data); } ?>

質問者

お礼 2010/04/30 22:09

ありがとうございます。参考にしてみます。

その他の回答 (1)

yyr446
ベストアンサー率65% (870/1330)

2010/04/30 16:12 回答No.1

まずは、やり方を... 「formのところに【寺】と入力すると」の部分は、onkeyupのイベントでajaxを起動することにします。 ajaxでjson形式のテキストを返してもらって、それでselectボックスの <option>たちを作り直せばよいです。 cgi側のDBを読む処理は、そちらのカテゴリーで聞いてみてください。そもそもDBって何ですか？cgiはPerlですか？ PHP＋MySQLなら、サンプル提示出来そうですが．．．

質問者

お礼 2010/04/30 22:08

ありがとうございます。phpのサンプルは見つけてperlで試しているんですが、うまくいかないので質問させていただきました。 cgiはperlです。とりあえず、perl側での受け取り方とperl側からの送信方法さえわければ問題ないのですが…。

関連するQ&A

jQueryでajax
ajax（jQuery使用）を使った以下のサンプルは、セレクトボックスを選択すると、ボタンを表示するのですが、そのボタンをクリックしても、アラート（This is success!）が表示されません。 ajaxで吐き出した<button>ボタン</button>のボタンのクリックイベントが検知しないような感じですが、いったいどこが間違っているのかわかりません。どなたか、ご教授いただけると助かります。 htmlソース ------------------------------------------- <meta http-equiv="content-script-Type" content="text/javascript" /> <meta http-equiv="content-style-Type" content="text/css" /> <link rel="stylesheet" href="./photo.css" media="all" /> <title> テスト</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("button").click(function() { alert("Test is success!"); }); $(".first").change(function() { var param = ''; $.ajax ({ type: "POST", url: "ajax.php", data: param, cache: false, success: function(res) { $("#result").html(res); } }); }); }); </script> </head> <body> <select name="first" class="first" id="first"> <option value="1">項目１</option> <option value="2">項目２</option> </select> <p>結果：</p> <div id="result" style="width:808px;"></div> </body> </html> phpソース ---------------------------------------- <?php echo '<button>ボタン</button>'; ?>
- ベストアンサー
- AJAX
jqueryでtable内容の置き換え
Jqueryを利用してAJAXでPOSTしてその計算結果をTableに埋め込もうとしています。 tableは複数行あり、入力フォームがあります。その各行に入力された内容をPOSTしてPHPで計算します。戻ってきた内容を同一行に埋め込もうとしています。どのようにすればいいでしょうか？ id="in1"とid="out1"というテキストボックスに入力しout1のテキストボックスからカーソルが外れると AjaxでPOSTします。その計算結果をid="result1"に表示します。このような行が50行あります。 50回ajaxの処理を書くのはおかしいかなと思いつつもどのようにしていいのかわかりません。教えてください。よろしくお願いいたします
- ベストアンサー
- AJAX
jQuery1.9.1でajax応答処理が動かない
お世話になります。 jQuery1.9.1でajaxを使用したいのですが、表題の通りresponse受信時の処理が動かず困っています。（下記コード抜粋で"test2"が表示されません。）自分でも調べてはいるつもりですが、知識不足で何をどう調べた物かも分からず成果が上がらないため、何か助言を頂ければと思い投稿致します。＜問題＞ jQueryを使用してajax通信を行うコードがあるが、サーブレットからの応答受信時の処理が実行されない。＜備考＞・同じソースコードを使用し、正常に動作する環境もあるため、　プログラム上のバグではなく環境構築の問題と思われる。・今日までjavaとjavaScriptの区別もつかなかった人間(私ですが)が環境構築しているので、　初歩の初歩でポカをやらかしている可能性は十分あり。・ajaxによるリクエスト送信とサーブレット側は動くことをデバッガで確認済み。＜環境＞ windows7 apache-tomcat 7.0.42 JDK 7u25 eclipse Java EE IDE(ver: kepler release / build id:20130614-0229) jQuery 1.9.1 jQuery-ui 1.10.3 ＜コード抜粋＞・java script側 <script src="//code.jquery.com/jquery-1.9.1.js" ></script> <script src="//code.jquery.com/ui/1.10.3/jquery-ui.js" ></script> 　～省略～ <script> $(function() { $('#test-form').on('submit',function() { alert("test1"); $.ajax({ url: "${pageContext.request.contextPath}/test", type: "POST", data: { inputStr: $('#test-form').find('input[name="testInput"]').val(), }, }).done(function (data, textStatus, jqXHR) { alert("test2"); }); return false; }); }); </script> ・サーブレット側 { String inputWork = request.getParameter("inputStr"); 　～省略～ StringBuilder stringBuilder = new StringBuilder(); stringBuilder.append("<result>"); stringBuilder.append("OK"); stringBuilder.append("</result>"); String xmlString = stringBuilder.toString(); response.setContentType("text/xml"); response.setHeader("Cache-Control", "no-cache"); Writer writer = response.getWriter(); writer.write(xmlString); writer.flush(); }
- ベストアンサー
- Java
jqueryの$.ajaxで送信できない
はじめまして。 jquery初心者ですが、$.ajax使ってのPOST送信ができません、php側でログを取ってみてもアクセスすらしません。若干お手上げなので、分かる方がいたら、アドバイスを頂けませんか？【やりたいこと】 formにデータを入力(html)し　→　jqueryを使ってpost送信(js)　→　認証(php)　→　結果をhtmlに表示させたい。【ソース】 -a.html- <form method="post" id="signin" action=""> <input id="email" name="email" value="" title="email" class="required" tabindex="4" type="text"> <input id="posturl" type="hidden" name="posturl" value="a.php"> <input id="signin_submit" value="Sign in" tabindex="6" type="submit"> </form> -------- -a.js- $(function() { $("form#signin").submit(function() { var email = $("input#email").val(); var postFile = $("input#posturl").val(); var data = {email:email}; $.ajax({ type: "POST", url: postFile, data: data, timeout: 1000, error: function(){ // エラー時 alert('Error'); }, success: function(data) { if(data != ''){ alert(data.result); } else { alert('no data'); } } }); }); }); -------- -a.php- (他略、とりあえず適当に出力してみる) echo "{'status': false,}"; exit; -------- よろしくお願いします。ｍ＿ｍ
- 締切済み
- オープンソース開発
Ajaxでウインドウ出力について
CGI上で、HTMLのコードを書いて、WEBページを出力（表示）することが出来ますが、それと同じようなことが、Ajax（Jqueryを使っています）で出来ませんでしょうか。 CGIを使ってやろうとしていたのですが、同じページでFormタグを多用しており、CGI以外の方法でページ出力をしようと思います。 HTMLからOnClickで値をAjaxに渡して、データベースとやりとりをし、Ajaxに値を戻してそれを元にページを作成して出力をさせたいのです。（別ウインドウを立ち上げで）このようなことは出来ますでしょうか。また、出来るようでしたらどうやってプログラムを作成すればいいでしょうか。教えてください。よろしくお願いいたします。
- ベストアンサー
- AJAX
フォームからjQuery,jQuery.jsonを使ってJSONを作っ
フォームからjQuery,jQuery.jsonを使ってJSONを作ってPHPで表示したい。こんばんは。2、3日ずっと悩んでて解決しないので助けてください。 jQuery,jQuery.jsonを使ってJSONを作成しています。クリックイベントに var form = $("#sform"); var json = $(form.serializeArray()); var strJson = $.toJSON(json); という形をとって $.ajax({ url : "request.php", type : "post", data : strJson, success: function(request){ $('#result').html(request); } }); で送っています。ただPHP側で var_dump($_POST); を行ってもArray ( ) と表示されます。 firebugで見たところpostに入っているデータは以下の通りです。 {"0":{"name":"date","value":"2010/09/15"},"1":{"name":"type","value":"new"},"2":{"name":"bin[]","value":"2"},"3":{"name":"bin[]","value":"3"},"length":4} var_dumpで表示できないのはなぜでしょうか？上記で変数json のまま送るとオブジェクトとして送れてvar_dump でも表示できます。ただ今はjson の勉強をしているので、できればなぜこうなっているのかを理解したいです。基本的なところで勉強不足かもしれませんが、何かアドバイスなど頂けると嬉しいです。よろしくお願いします。
- ベストアンサー
- JavaScript
AJAXで新規表示されたボタンが稼働しない
下記のようなものを作りました。 1 通常は下記のような　<100購入>というボタンが表示されています。 <button class="button8" type="submit" name="volume" value="100">100購入</button> 2 <追加表示ボタン>を押すと、 <button class="button8" type="submit" name="volume" value="500">500購入</button>という<500購入>ボタンが新たに追加されます。 3 <100購入>ボタンか<500購入>ボタンを押すと、お好きな数値が購入できます。前提条件 <100購入>ボタンは、当初から<form></form>内に直接記載されているボタンです。 <500購入>ボタンは、<追加表示ボタン>を押した際、AJAXにより、<form></form>内に新たに設置されるボタンです。問題点 <100購入>ボタンは問題なく稼働します。しかしながら、AJAXにより新たに設置された<500購入>ボタンを押しても、Formが稼働しません。どのようにすれば、AJAXにより新たに設置された<500購入>ボタンが稼働するようになるでしょうか? よろしくお願いいたします。 +++++++++++++++++++++++++++++++++++++++++++++++++++ 当方が作ったソース <script type="text/javascript" src="./js/jquery.js"></script> <form action="abc.cgi" method="post" name="form1" id="form1"> <div id="msg">ここへ出力</div> <button class="button8" type="submit" name="volume" value="100">100購入</button </form> <BR> <button id="btn0">追加表示</button> <script type="text/javascript"> jQuery(function($){ $("#btn0") .click(function () { $.ajax({ beforeSend:function(BTN){ $("#msg").append("<BR>新規ボタンを表示します<BR>"); }, complete: function (BTN, textStatus) { $("#msg").append("<button class=\"button8\" type=\"submit\" name=\"volume\" value=\"500\">500購入</button><BR>"); } }); }); }); </script>
- ベストアンサー
- JavaScript
ASP.NETの新しいWEBサイトでAjaxテンプレートがでない
ASP.NET初心者です。本の通り操作し、VWD2008(VisualStudio2008無償版)をインストールしました。もちろん、IISの設定もVWD2008をインストールする前にしました。 VWD2008をインストールすると、自動でAjax1.0がインストールされるらしいのですが、「新しいWEBサイト」のダイアログに Ajax関連のテンプレートが表示されません。 VWD2008を起動すると、ツールボックスにはAjaxの機能は追加されているようです。 VWD2008をインストールした時に、Ajaxがうまくインストールできなかったのかもしれない？？？と思い、ネットからAjax1.0をダウンロードし、インストールしましたが、やはり「新しいWEBサイト」のダイアログにAjax関連のテンプレートは表示されません。何か設定方法があるのでしょうか？この作業ができないと、本の学習で前にすすめません・・・誰か、ご存知の方、助けて下さい！
- 締切済み
- Microsoft ASP
PHPのフォームとAjaxを組み合わせたいのですが
簡潔にコードを書かせて頂きますが、PHPとjQueryによるAjaxを連携させたいと考えています。まずform.phpのフォームをsubmitし、その内容をpost.phpへ送り、リダイレクトにてres.phpへ送るという、PHPの基本的な動きをさせますが、その結果はres.phpという新しいページではなく、Ajaxにてform.phpの<div id="text1">部に元々書かれている<form>ではなく、res.phpの出力内容を出力したいと考えております。この場合、どのようにjQueryコードを記述すればいいのでしょうか？色々考えて試してみたのですが、上手くいきませんでした。自分はform.php、post.php、res.phpという３つのファイルを用意していますが、もしかしたらori.phpという出力用のファイルを用意し、その<div>空間内にform.phpのフォームやres.phpの結果をAjaxによって出力するのかなとも思いましたが、良く分かりませんでした。アドバイス頂けないでしょうか？宜しくお願い致しします。 (( form.php )) <html> <head> <script type="text/javascript" src="./js/jQuery-1.4.4.js"></script> </head> <body> <div id="text1"> <h2>その1</h2> <form action="post.php" method="POST" id="form" name="form" > <input type="checkbox" id="news" name="news" value="news" /> ニュース <br /> <input type="submit" name="submit" value="submit" /> <input type="reset" name="reset" value="reset" /> </form> </div> </body> </html> (( post.php )) <?php session_start(); session_regenerate_id(TRUE); $_SESSION["news"] = "news 表示"; $host = $_SERVER['HTTP_HOST']; $uri = rtrim(dirname($_SERVER['PHP_SELF']), '/\\'); $extra = 'res.php'; header("Location: http://$host$uri/$extra"); (( res.php )) <?php session_start(); session_regenerate_id(TRUE); ?> <html> <head> <script type="text/javascript" src="./js/jQuery-1.4.4.js"></script> </head> <body> <div id="text2"> <h2>その2</h2> <?php $_SESSION["news"]; ?> </div> </body> </html> <?php session_destroy(); $_SESSION = ''; ?>
- ベストアンサー
- PHP
DBで新規追加したデータがAjaxで反映されない
いつもお世話になっております。 Apach・PHP・MySQLの構成でWEBアプリを作成しております。データ表示画面でセレクトボックスを二つ設置して、一つ目のセレクトボックスを選択した時、OnChangeイベントで Ajaxを利用し選択されたデータのキーに紐づくデータを取得して二つ目のセレクトボックスに表示するといった処理を作りたいと考えています。実際にプログラムを組み実装できたのですが、二つ目のセレクトボックスに表示するデータを新規登録で追加して、再度一つ目のセレクトボックスを選択してデータ表示をおこなっても、追加したはずのデータが表示されません。ページロードや別画面から再度遷移してきても結果は同じなのですが、一度ブラウザ(IE6.0)を閉じて再度接続してセレクトボックスを選択すると追加したデータが表示されます。以下が該当するAjax部分のソースです。 var Ajax; function CreateAjax(){ try{ Ajax = new ActiveXObject("Msxml2.XMLHTTP"); return Ajax; }catch(e){ Ajax = new ActiveXObject("Microsoft.XMLHTTP"); return Ajax; } } function fncAjax(strURL, strID){ try{ Ajax = CreateAjax(); Ajax.open("GET",strURL); Ajax.onreadystatechange = function(){ if(Ajax.readyState == 4 && Ajax.status == 200){ var obj = document.getElementById(strID); obj.innerHTML = Ajax.responseText; } } Ajax.send(null); }catch(e){ alert(e.description); } } function js_OnSelChange(){ try{ fncAjax("http://hogehoge.com/?key=" + document.form.selectdata.value, "ID"); }catch(e){ alert(e.description); } } どなたか対応策をご存知でしたら、ご教授願いいます。以上。
- ベストアンサー
- JavaScript