![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?8acaa2e)
jQuery,Ajaxでcgiに接続する方法がわからなくて困っています。
あるデータベースのあるテーブル(仮にpersonテーブル)を参照して、html上のformタグに文字を入れるとselectボックス内に表示されるものがマッチしたものが表示されるようなものを作りたいと思っています。
例えば、
personテーブルのperson_nameカラムには(秋本、本田、寺西、寺本、戸田、吉岡)という情報が入っていて、selectボックス内は最初全ての人名が出ているとします。
person.htmlというテンプレートのformのところに【寺】と入力するとselectボックス内は寺西と寺本だけ表示される。
そのようなものを作りたいと思っていますがうまくいきません。何か参考になるURLだけでもかまいませんのでご教授下さい。
できればサンプルソースがあればうれしです。
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">
<!--
$(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);
}
?>
No.1
- 回答日時:
まずは、やり方を...
「formのところに【寺】と入力すると」
の部分は、onkeyupのイベントでajaxを起動することにします。
ajaxでjson形式のテキストを返してもらって、それでselectボックスの
<option>たちを作り直せばよいです。
cgi側のDBを読む処理は、そちらのカテゴリーで聞いてみてください。
そもそもDBって何ですか?cgiはPerlですか?
PHP+MySQLなら、サンプル提示出来そうですが...
ありがとうございます。phpのサンプルは見つけてperlで試しているんですが、うまくいかないので質問させていただきました。
cgiはperlです。
とりあえず、perl側での受け取り方とperl側からの送信方法さえわければ問題ないのですが…。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Excel(エクセル) PHPプログラムをエクセルに張り付けると検索ボックスがでてくる! 3 2022/05/08 07:10
- PHP if(preg_match("/[^0-9]/",$gu_d)){意味を教えてください。 1 2022/05/06 05:37
- MySQL mysqlがインストールされているのかわかりません 1 2023/06/05 02:26
- MySQL PHPとMySQLを使った掲示板の作り方 1 2022/06/02 13:00
- CGI perlで書いたcgiでsqliteの使い方を教えてください 2 2023/05/08 21:29
- MySQL mysqlがインストールされているのかどうか 1 2023/06/05 14:19
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- JavaScript HTML,JS初心者です。 2つのselectボックスが有り その選択の組み合わせにより 指定した文 3 2022/03/31 23:35
- PHP コメント機能に返信欄を矢印で追加したい 1 2022/05/09 21:17
- PHP php my adminより取り出したデータ表示 2 2022/06/15 11:56
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
jQueryを使いformでsubmitした...
-
AjaxでJSONを受信すると、文字...
-
jQueryのblockUIをformのボタン...
-
JavascriptからPHPへのAjax通信...
-
フレーム内の要素へのXPATHはど...
-
Folder.selectDialog()について
-
カンマ区切りのデータを配列に...
-
SQLのmaxで求めた値を変数に代...
-
JavaScriptでtabindexの変更っ...
-
日付が変わると自動更新
-
JQUERY のEmpty()処理について
-
javascriptでフォーム部品の参...
-
絞り込み検索の後にソートを追...
-
readyStateが4にならない原因
-
backbone.js テンプレートの表...
-
ホームページのジャンプ先を制...
-
JQueryでAjax通信をキャンセル...
-
指定した時間のみ表示されるよ...
-
環境:WinXP+IE7+jquery1.4.2
-
Javascriptを使ってQRコード読...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
JavascriptからPHPへのAjax通信...
-
AjaxでJSONを受信すると、文字...
-
jQuery を外部ファイルから呼び...
-
jQueryを使いformでsubmitした...
-
jQueryのblockUIをformのボタン...
-
jQueryで外部テキストファイル...
-
ajaxからphpにpsotしたときの日...
-
jQuery3 reset()が効かない。
-
JSONをperlで受け取る方法
-
jQuery,Ajaxでcgiに接続する方...
-
flash javascript php の引数受...
-
IE8で動かないJQuery
-
AJAXでプルダウン連動(SJIS環境)
-
グーグルマップの吹き出しから...
-
ajaxでPHPにPOST送信して結果デ...
-
IE8 form action属性をはずす...
-
Perl JavaScript Ajax リアルタ...
-
Ajax サーバーに負荷かかります...
-
twitter @anywhereのtweetboxか...
-
ページを遷移せずにデータ送信
おすすめ情報