「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を読込み、結果をコンソールに出力します。