「jQuery」getJSONでjsonデータを取得するサンプル
環境
jQuery 3.6.0
書式
jQuery.getJSON( url, data, callback )
引数
url 読み込むページのURL
data キーと値の組み合わせ
callback 通信成功時のコールバック関数
使用例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function(){
$('#btnRead').click(function(){
//JSONデータへのパス
var path = "user.json";
//JSONデータを取得し、配列に格納する
$.getJSON(path, function(data){
var result = [];
$.each(data, function(key, val){
result.push("key:" + key + " val:" + val);
});
//取得したJSONデータをコンソールに表示する
for(let i in result){
console.log(result[i]);
}
});
});
});
</script>
</head>
<body>
<input type="button" id="btnRead" value="検証">
</body>
</html>
結果
「検証」ボタンを押すとuser.jsonを読込み、結果をコンソールに出力します。