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

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

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

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

$.postメソッド

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

コード

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

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

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jqueryのpostのサンプル</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/post";

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

		// 1.$.postで通信を行う。"json"はサーバから返されるデータの種類。
		$.post(url,testData,null,"json")

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

			// 3. キーを指定して値を表示
			$("#span3").text(data1["form"]["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で見ると5,6行目の"form"と"cs1"を指定して値の"custom1"を取得しています。

{
    "args": {},
    "data": "",
    "files": {},
    "form": {
        "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",
        "Content-Length": "23",
        "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
        "Host": "httpbin.org",
        "Origin": "null"
    },
    "json": null,
    "url": "http://httpbin.org/post"
}