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

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

目次

$.postメソッド

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

コード

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

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jqueryのpostのサンプル</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.$.postメソッドで通信を行う
		//  $.post(通信先,送信するデータ)
		//  送信するデータは、フォームの内容をserialize()している
		//  →serialize()の内容は、cs1=custom1&cs2=custom2
		$.post('http://httpbin.org/post',$("#form1").serialize())

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

				// 3. キーを指定して値を表示 (テキストボックス1の値)
				$("#out1").html(data1["form"]["cs1"]);
				})

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

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

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

<form id="form1">
<input type="button" id="btn1" value="ボタン1"><br/>
テキストボックス1<br/>
<input type="text" name="cs1" value="custom1" maxlength="10"><br/><br/>
テキストボックス2<br/>
<input type="text" name="cs2" value="custom2" maxlength="10">
</form>
</body>
</html>

取得するJSON

以下のJSONを取得します。
上記コードの24行目では、JSONの4行目の"form"と"cs1"を指定して値の"custom1"を取得しています。

{"args":{},
"data":"",
"files":{},
"form":{"cs1":"custom1","cs2":"custom2"},
"headers":{"Accept":"*/*",
"Accept-Encoding":"gzip, deflate",
"Accept-Language":"ja,en-US;q=0.8,en;q=0.6",
"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"}

関連の記事

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

△上に戻る