Columnコラム
JSONファイルを「$.ajax」で読み込む
JSONファイルを$.ajax で読み込む場合の基本。※chromeの場合、ローカルでは動かないので、Firefoxを使うこと。
sample.json 内に以下のJSONの記述を行う
[
{“id”:”160″,”newid”:”25″,”oldid”:”16″},
{“id”:”141″,”newid”:”25″,”oldid”:”16″},
{“id”:”135″,”newid”:”16″,”oldid”:”25″},
{“id”:”134″,”newid”:”25″,”oldid”:”16″},
{“id”:”115″,”newid”:”16″,”oldid”:”25″},
{“id”:”112″,”newid”:”16″,”oldid”:”25″},
{“id”:”111″,”newid”:”16″,”oldid”:”25″},
{“id”:”71″,”newid”:”25″,”oldid”:”16″}
]
読み込むHTMLファイルは下記のようにする。
<head><script src=”http://autoproject.sakura.ne.jp/imc_show/js/jquery.js”></script></head>
<body>
<script type=”text/javascript”>
$(function(){
$.ajax({
type: ‘GET’,
url: ‘sample.json’,
dataType: ‘json’,
success: function(json){
document.write(json[2].id);
}
});
});
</script>
</body></html>
json[2].id の箇所を
json[0].id や
json[1].newid
に変更することで任意の値を取得できる。
あとは、必要に合わせて成形していくことで、ブラウザに出力が可能となる。
エンジニアのみなさまへ
株式会社オートプロジェクトでは、中小企業向けのシステム・アプリケーション開発 / 外注サービスを提供しております。
貴社のニーズに応じた柔軟なサポートを行いますので、ぜひお気軽にご相談ください。
合わせて読みたい [関連記事]
関連記事表示にはFUTURAの技術を利用しています
Recommended by
関連記事表示にはFUTURAの技術を利用しています
Recommended by