getJSON()：getJSONメソッド(json形式ファイルの取得)による非同期通信
getJSONメソッド(json形式ファイルの取得)による非同期通信の書式
$.getJSON("json形式ファイルの読み込み先のパス", コールバック関数);
$.getJSON("json形式ファイルの読み込み先のパス", コールバック関数);を記述します。
getJSONメソッドを使用します。
具体例(getJSONメソッドによるjson形式ファイルの内容の取得のサンプルコード)
テスト用の読み込み先のjson形式ファイルの中身
１．キーが「getJSON_key番号」、値が「getJSON_value番号」で暗号は1から5
test-getJSON.json
{
"getJSON_key1":"getJSON_value1",
"getJSON_key2":"getJSON_value2",
"getJSON_key3":"getJSON_value3",
"getJSON_key4":"getJSON_value4",
"getJSON_key5":"getJSON_value5"
}
getJSONメソッドを使っているjQueryのhtmlサンプル
１．getJOSNメソッドを使用
２．引数にはjsonファイルのパスを指定（ここでは同じディレクトリのtest-getJSON.jsonとする）
３．コールバック関数にて受け取ったjson内容をeachメソッドでループしてtrタグを作成
４．この時、キーがthタグに、値がtdタグに格納される。
５．こうして作成されたtrタグをprependメソッドにてtableタグの中に追加。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
<!--
-->
</style>
<script src="../../js/jquery-1.12.2.min.js"></script>
<script>
$(function(){
$.getJSON("test-getJSON.json", function(data){
// trタグが格納される配列
var trTags = "";
$.each(data, function(key, val) {
trTags = trTags + "<tr><th>" + key + "</th><td>" + val + "</td></tr>\n";
});
$("table").prepend(trTags);
});
});
</script>
</head>
<body>
<table border = "1"></table>
</body>
</html>
getJSONメソッドによるjson形式ファイルの内容の取得のサンプルコードの結果
