jQueryでJSONデータへアクセスするプログラムを作る機会は多くあります。JSONデータを別ファイルから読み込む前に、こういうサンプルプログラムを作って動作確認をしておきましょう。
次のコードをsample_jQueryJSON.htmlという名前で保存します。説明が必要な部分はほとんどないでしょう。変数 json のデータは for文を使って取り出せます。i で key の値が参照でき、json[i] で value となる値が参照できます。
<html>
<head>
<title>jQuery JSON sample</title>
<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
var json = {"name": "hiro345", "uri": "http://www.sssg.org/blogs/hiro345/"};
$(function() {
$("#btn").click(function(){
for (i in json) {
$("#result").append(i + ": " + json[i]).append("<br/>");
}
});
});
</script>
</head>
<body>
<form>
<input type="button" value="show" id="btn" />
</form>
<div id="result"></div>
</body>
</html>
<head>
<title>jQuery JSON sample</title>
<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
var json = {"name": "hiro345", "uri": "http://www.sssg.org/blogs/hiro345/"};
$(function() {
$("#btn").click(function(){
for (i in json) {
$("#result").append(i + ": " + json[i]).append("<br/>");
}
});
});
</script>
</head>
<body>
<form>
<input type="button" value="show" id="btn" />
</form>
<div id="result"></div>
</body>
</html>