三流プログラマの雑記

プログラム、ゲーム、株、その他雑記など書いてます。

jQuery + JSON

JS

とりあえず、苦手意識の塊の言語を触れてみた。
もうちょっと見た目をきれいにしたいんだけど、、、
こういうの苦手なんだよね！
ってことでべったり貼り付けてみた。JSONファイルをただ単に読み込んでみたりするだけ！

index.html

<html>
<head>
  <title>js sample</title>
  <script type="text/javascript" src="jquery-1.7.2.min.js"</script>
  <script type="text/javascript" src="test.js"</script>
</head>
<body>
  <div id="show_head"</div>
  <input id="btn_1" type="button" value="データ取得" onclick="test()" />
</body>
</html>

test.js

var json;
$( function() {
  var test ="";
  $.getJSON("data/sample.json", function(data){
    json = data;
    for(key in json){
      test += key + ":" + json[key] + " ";
    }
    $("#show_head").text(test);
  });
});

function test(){
      alert("取得したデータ：" + json.red);
}

test.json

[{"id":"red","col":"赤"},{ "id":"blue","col":"青"},{ "id":"yellow","col":"黄"}]