jQuery $.getJSONで通信を行ってJSONを取得するサンプル

jQueryの$.getJSONメソッドで通信を行ってJSONを取得するサンプルです。
ajaxで呼ぶ側と呼び出し先のサーバーが同じドメインの場合です。

目次

$.getJSONメソッド

  • HTTPのGETで通信を行います。
  • JSON形式のデータを取得します。
  • クロスドメインの通信をする場合は、サーバー側でのAccess-Control-Allow-Originヘッダの設定またはサーバー側と呼び出し側のJSONPの設定が必要です。
  • 以下はjQuery公式サイトの$.getJSONメソッドのリンクです。
    http://api.jquery.com/jQuery.getJSON/

コード

サンプルのコードです。
48行目のボタンを押すとGETで通信が始まり、JSON形式のデータを取得して表示します。
テストするサイトとしてhttpbin(http://httpbin.org/)を使用しています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jqueryのgetJSONのサンプル</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$( function() {
	$('#btn1').click(
	function(){
		$("#out1").html("データ取得中です");

		// 1. $.getJSONメソッドで通信を行う
		//   $.getJSON(通信先,送信するデータ)
		$.getJSON('http://httpbin.org/get',{ name: "Taro", time: "5pm" })

			// 2. doneは、通信に成功した時に実行される
			//  引数のdata1は、通信で取得したデータ
			.done(function(data1) {

				// 3. キーを指定して値を表示 (5pmが表示される)
				$("#out1").html(data1["args"]["time"]);

				// 4. オブジェクトをJSON形式の文字列に変換
				var data2 = JSON.stringify(data1);
				console.log(data2); //コンソールにJSON形式で表示される
			})

			// 5. failは、通信に失敗した時に実行される
			.fail(function() {
				$("#out1").html("取得に失敗しました");
			})

			// 6. alwaysは、成功/失敗に関わらず実行される
			.always(function() {
				$("#out2").html("完了しました");
			});
	});
} );
</script>
</head>
<body >

<p>表示1:<span id="out1"></span></p>
<p>表示2:<span id="out2"></span></p>

<p>ボタンを押すと通信が始まります</p>
<input type="button" id="btn1" value="ボタン1">

</body>
</html>

取得するJSON

取得するJSONは以下のとおりです。
上記コードの22行目では、JSONの1行目の"args"と"time"を指定して値の"5pm"を取得しています。

{"args":{"name":"Taro","time":"5pm"},
"headers":{
"Accept":"application/json, text/javascript, */*; q=0.01",
"Accept-Encoding":"gzip, deflate",
"Accept-Language":"ja,en-US;q=0.8,en;q=0.6",
"Connection":"close",
"Host":"httpbin.org",
"Origin":"null",
"url":"http://httpbin.org/get?name=Taro&time=5pm"}

関連の記事

jQuery $.ajaxで通信を行ってJSONを取得するサンプル
jQuery $.getで通信を行ってJSONを取得するサンプル
jQuery $.postで通信を行ってJSONを取得するサンプル



△上に戻る