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

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

確認環境
・Windows10
・Google Chrome
・jQuery 3.3.1

$.getJSONメソッド
コード
取得するJSON

$.getJSONメソッド

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

コード

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

25行目の取得したデータのdata1はJavaScriptオブジェクトになります。
33行目は、stringifyメソッドでJavaScriptオブジェクトをJSONに変換しています。

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

		// 送信先のURL
		const url = "http://httpbin.org/get";

		// 送信するデータは、フォームの内容をserialize()しています
		// serialize()の内容は、cs1=custom1&cs2=custom2です
		const testData = $("#form1").serialize();

		// 1. $.getJSONメソッドで通信を行う
		$.getJSON(url,testData)

			// 2. doneは、通信に成功した時に実行される
			//  引数のdata1は、通信で取得したデータ
			.done(function(data1,textStatus,jqXHR) {
				$("#span1").text(jqXHR.status); //例：200
				$("#span2").text(textStatus); //例：success

				// 3. キーを指定して値を表示
				$("#span3").text(data1["args"]["cs1"]);

				// 4. JavaScriptオブジェクトをJSONに変換
				const data2 = JSON.stringify(data1);
				console.log(data2); //コンソールにJSONが表示される
			})
			// 5. failは、通信に失敗した時に実行される
			.fail(function(jqXHR, textStatus, errorThrown ) {
				$("#span1").text(jqXHR.status); //例：404
				$("#span2").text(textStatus); //例：error
				$("#span3").text(errorThrown); //例：NOT FOUND
			})
			// 6. alwaysは、成功/失敗に関わらず実行される
			.always(function() {
				$("#span4").text("完了しました");
			});
	});
} );
</script>
</head>
<body >

<p>表示1：<span id="span1"></span></p>
<p>表示2：<span id="span2"></span></p>
<p>表示3：<span id="span3"></span></p>
<p>表示4：<span id="span4"></span></p>

<form id="form1">
<input type="button" id="button1" value="ボタン1">
<p>テキストボックス１</p>
<input type="text" name="cs1" value="custom1" maxlength="10">
<p>テキストボックス２</p>
<input type="text" name="cs2" value="custom2" maxlength="10">
</form>

</body>
</html>

JavaScript オブジェクトをJSONにする(stringify)

取得するJSON

以下は、上記コードの33行目のstringifyメソッドで取得したJSONです。
(IPアドレス等の一部情報は削除しています。)

上記コードの30行目では、以下のJSONで見ると2,3行目の"args"と"cs1"を指定して値の"custom1"を取得しています。

{
    "args": {
        "cs1": "custom1",
        "cs2": "custom2"
    },
    "headers": {
        "Accept": "application/json, text/javascript, */*; q=0.01",
        "Accept-Encoding": "gzip, deflate",
        "Accept-Language": "ja,en-US;q=0.9,en;q=0.8",
        "Connection": "close",
        "Host": "httpbin.org",
        "Origin": "null"
    },
    "url": "http://httpbin.org/get?cs1=custom1&cs2=custom2"
}