- ベストアンサー
jQuery,Ajaxでcgiに接続する方法がわからなくて困っています
- jQueryとAjaxを使ってcgiに接続する方法が分からず困っています。データベースのテーブルを参照し、フォームに入力された文字にマッチする情報をselectボックス内で表示したいです。
- selectボックス内に表示される情報を絞り込むために、Ajaxを使用してcgiに接続したいです。現在はうまく機能しないため、参考になるURLやサンプルソースを探しています。
- 特定のデータベースのテーブルに格納されている情報を表示するためのフォームを作成し、フォームに入力された文字に一致する情報をselectボックス内に表示したいです。現在の実装ではうまくいっていないため、jQueryとAjaxを使ったcgiへの接続方法を学びたいです。
- みんなの回答 (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"> <!-- $(function(){ $("#search_name").keyup(function(){ if(!$(this).val()) return false; console.log($(this).val()); $.ajax({ type: "POST",url:"/hogehoge.php?",dataType:"json", data:{"search_name":$(this).val()}, success:function(data){ $('#person').empty(); for(var i=0;i<data.length;i++){ var option=$("<option>"); option.val(data[i]); option.text(data[i]); $('#person').append(option); } }, error:function(XMLHttpRequest,status,errorThrown){ alert(XMLHttpRequest.url + ":"+ status); } }); }); }); // --> </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); } ?>
その他の回答 (1)
- yyr446
- ベストアンサー率65% (870/1330)
まずは、やり方を... 「formのところに【寺】と入力すると」 の部分は、onkeyupのイベントでajaxを起動することにします。 ajaxでjson形式のテキストを返してもらって、それでselectボックスの <option>たちを作り直せばよいです。 cgi側のDBを読む処理は、そちらのカテゴリーで聞いてみてください。 そもそもDBって何ですか?cgiはPerlですか? PHP+MySQLなら、サンプル提示出来そうですが...
お礼
ありがとうございます。phpのサンプルは見つけてperlで試しているんですが、うまくいかないので質問させていただきました。 cgiはperlです。 とりあえず、perl側での受け取り方とperl側からの送信方法さえわければ問題ないのですが…。
お礼
ありがとうございます。 参考にしてみます。