こんにちは。
陽気なシステム屋の一員のシホンヌです。
昨日ワタクシ、javaScriptで初めて「AjaxでJSONファイルを読み込む」という事を行いました。
恥ずかしながら、Ajaxをアジャックスと読むほどAjaxのことを知らず、JSONと聞いてベタに映画「13日の金曜日」しか思い出せないという阿呆っぷりを発揮しましたが、なんとかできたので今回は備忘録を兼ねてその方法を紹介します。
私が今回やりたかったことは
「PHPのselectボックスで選んだ会社Noから会社名と住所を取得し画面に表示する。」
です。
selectボックスのonChange処理時の実装をこのようにしました。
function getXXXInfo() {
// selectボックスで選択した会社Noを取得
var select = document.getElementById(‘selectXXXNo’);
var options =document.getElementById(‘selectXXXNo’).options;
var xxxNo = options.item(select.selectedIndex).value;
// AjaxでJSONファイルを読み込む
$.ajax({
url: “http://xxx/getXXXInfo.json”, <– (1)リクエストするURLを指定
type: “POST”, <– (2)HTTP通信の種類を指定
data: { xxx_no : xxxNo }, <– (3)サーバに送信する値を指定
success: function(data) {
// データ取得成功時
// (4)取得したデータをJSON文字列に変換
var stringData = JSON.stringify(data);
// (5)JSON文字列をオブジェクトに変換
var parseData = JSON.parse(stringData);
// (6)取得した値を表示
var xxxName=document.getElementById(“xxx_name”);
var xxxAddress=document.getElementById(“xxx_address”);
xxxName.innerText=parseData.result.xxx_name;
xxxAddress.innerText=parseData.result.xxx_address;
}
});
}
これで、やりたかった処理ができました。
やったー！
取得したデータをどうやって取り出すかに悩みました…。
(4)取得したデータをJSON文字列に変換
(5)JSON文字列をオブジェクトに変換
という手順を踏んだ後、(5)で取得したオブジェクト内から値を取り出さなければならないようです。
ちなみに取得したデータはこのような形のオブジェクトです。
{“result”:
{
”xxx_no”:”1″,
”xxx_name”:”会社名００１”,
”xxx_address”:”会社住所００１”
}
}
ちなみに、Ajaxを使うときはjQeryをダウンロードしないで、ＵＲＬから直接取るようにhead内に下記1行を追加しました。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
他にもっと賢い方法があったらどなたかご教授ください(^-^)
Webサイト開発実績はこちら。
