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

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

目次

$.getメソッド

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

コード

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

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jqueryのgetのサンプル</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. $.getメソッドで通信を行う
		//   $.get(通信先,送信するデータ)
		$.get('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("取得に失敗しました"); //表示1
			})

			// 6. alwaysは、成功/失敗に関わらず実行される
			.always(function() {
				$("#out2").html("完了しました"); //表示2
			});
	});
} );
</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":"*/*","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 $.getJsonで通信を行ってJSONを取得するサンプル
jQuery $.postで通信を行ってJSONを取得するサンプル

 はまったらエンジニア特化型Q&Aサイト
【teratail(テラテイル)】で質問しましょう!


△上に戻る