- 締切済み
AjaxでDBと連携した動的リストボックスを作りたい
こんにちわ。 PHPの学習を始めたばかりなのですがリストボックスを使ったWEBで行き詰っています。 リストボックスは3つあり1つ目をSQL Server(ODBC接続)より値を表示して1つ目の値によって条件を絞った値を表示するこれもSQL Server(ODBC接続)です。3つめも同様の仕組みです。 数日間調べていたのですがSQL Serverを使用した例がありませんでした。 ご存知のサンプルがございましたら教えて下さい。 submitでのリストボックス連携はできるのですが画面のちらつきを改修して欲しいとのことからAjaxに辿り着きました。 皆様のお力をお貸し頂き解決までお付き合い頂ければ幸いです。 どうぞよろしくお願い致します。
- みんなの回答 (3)
- 専門家の回答
みんなの回答
- t_ohta
- ベストアンサー率38% (5253/13739)
まずsubmitを使わずにリストボックスの中身を書き換えるのはJavaScriptを使って実現します。 簡単なサンプルを用意しました。 http://takachan.jra.net/sample/0001.html ソースをご覧頂いてリストボックスの中身を書き換える方法をご理解いただければと思います。 リストボックスの中身を書き換える方法が分かれば、あとはAjaxを使ってサーバと連動するだけです。 サンプルではスクリプト内に選択肢のデータがベタ書きしてありますが、そこをAjaxを使ってサーバからもらったデータで書き換えるように変更するだけです。
- t_ohta
- ベストアンサー率38% (5253/13739)
サンプルを見る限り両方コーディングが必要ですね。 JSONデータと言っているのはデータの記述方法(持ち方)です。 http://ja.wikipedia.org/wiki/JavaScript_Object_Notation ブラウザ側ではAjaxでサーバに対してリクエストを送ります。(プルダウンを開いた時に他の項目のデータを条件にリストに表示するリストのデータをリクエスト) サーバサイドでPHPプログラムを動かし、リクエストされた条件を基にSQL Serverからデータを取得してJSONの形式でクライアントに返します。 ブラウザ側では受け取ったJSON形式のデータからリストボックスの中身を生成するという動きになっています。 サンプルはExt JSライブラリを使ってフォームを表示したりリストボックスの中身を書き換えているので、まずはこのライブラリの使い方を覚える方が先かもしれませんね。 残念ながら私はExt JSライブラリを使ったことがないので、このライブラリについてはお力になれません。
お礼
頂いたサンプルを元にもう少し自分で考えながらやってみようと思います。 どうもありがとうございました。
補足
t_ohtaさま ありがとうございます。 なるほど・・・ Ext JSライブラリを覚える必要性があるのですね。 調べてみますとsubmitを使わない連動リストボックスはAjaxという点に辿りつきました。 しかし、Ajaxと一重に言ってもサンプルによって色々やり方が違っているようでした。 下記参考URLではなくてもt_ohtaさまのご存知の方法をご教示頂けますでしょうか? JSONデータを持たずしても実装できる方法はありますでしょうか? お手数ですがよろしくお願い致します。
- t_ohta
- ベストアンサー率38% (5253/13739)
知りたいのはPHPで作るサーバサイドのプログラムのことですか。 それともJavaScriptで作るクライアントサイドのプログラムのことですか。 具体的にどの辺りで躓いているんでしょうか。
補足
t_ohtaさま どうもありがとうございます。 説明不足で大変申し訳ございません。 作成は下記URLのイメージになります。 http://ajax-world.sakura.ne.jp/extjs/combobox/04/ クライアントサイドになるのでしょうか。 JSONデータをサーバサイドのPHPから取得することで機能を実現しています。と記載されているのですがJSONデータをSQL Serverにて作成する事は可能なのでしょうか?
お礼
度々、申し訳ございません。 リストボックスで質問させて頂いたのですがt_ohtaさまのサンプルを拝見して気がつきました。 リストボックスではなくてコンボボックス(プルダウン)の間違いです。 よろしくお願いいたします。
補足
t_ohtaさま お手数をおかけ致します。 なるほど。内容を更新するのはJavaScriptだったんですね。 一つ解決致しました。 ありがとうございます。 中身を書き換える仕組みは理解することができました。 >そこをAjaxを使ってサーバからもらったデータで書き換えるように変更するだけです。 XMLか何かでSQL Serverのデータを取得してサンプルにて頂戴致しましたJavaScriptの処理分岐部分に返すと言ったイメージなのでしょうか? JavaScriptとデータの連携が理解できずにいます。 見当違いであったら申し訳ございません。 よろしくお願い致します。