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,Ajaxでcgiに接続する方...
-
jQuery を外部ファイルから呼び...
-
AjaxでJSONを受信すると、文字...
-
jQueryで外部テキストファイル...
-
JavascriptからPHPへのAjax通信...
-
div要素の入れ替え。半透明イメ...
-
階層別の組織図の自動作成について
-
Javascriptを使ってQRコード読...
-
Doctrineのjoinについて
-
カンマ区切りのデータを配列に...
-
JScriptでDBへの接続方法について
-
アコーディオンで多階層のメニ...
-
readyStateが4にならない原因
-
迷路探索プログラムを作るには...
-
ローカルでのonreadystatechang...
-
.txtファイルの読み込み
-
インラインフレームを自動更新...
-
googleマップが表示されない。
-
[jQuery UI] sortableを使いaja...
-
JavascriptでObjectからJSON形...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
JavascriptからPHPへのAjax通信...
-
jQueryを使いformでsubmitした...
-
jQueryのblockUIをformのボタン...
-
AjaxでJSONを受信すると、文字...
-
jQuery3 reset()が効かない。
-
Ajax サーバーに負荷かかります...
-
eval、$.eachで順番が入れ替わ...
-
ajaxからphpにpsotしたときの日...
-
jQuery を外部ファイルから呼び...
-
ajaxでPHPにPOST送信して結果デ...
-
JQueryの変数の扱いで弱ってい...
-
jQuery,Ajaxでcgiに接続する方...
-
Ajax・jQueryでGET時にIE...
-
ajax + PHPによるエラーの返し...
-
jquery × php × mysql 非同期で...
-
Ajaxでフォームデータを連続登...
-
Ajax・jQueryでGETとPOSTする方法
-
ajax&php post 一部更新
-
Selenium4でボタンをクリックで...
-
Javascriptを使ってQRコード読...
おすすめ情報