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

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

目次

$.ajaxメソッド

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

コード

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

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jqueryのajaxのサンプル</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$( function() {

$('#btn1').click(
function(){
	$("#out6").html("データ取得中です");

	// 1.$.ajaxメソッドで通信を行います。
	//  dataでは、フォームの内容をserialize()している
	//  →serialize()の内容は、cs1=custom1&cs2=custom2
	$.ajax({	
		url:'http://httpbin.org/post', // 通信先のURL
		type:'POST',		// 使用するHTTPメソッド (GET/ POST)
		data:$("#form1").serialize(), // 送信するデータ
		dataType:'json', // 応答のデータの種類 
						// (xml/html/script/json/jsonp/text)
		timeout:1000, 		// 通信のタイムアウトの設定(ミリ秒)

		// 2. doneは、通信に成功した時に実行される
		//  引数のdata1は、通信で取得したデータ
		//  引数のtextStatusは、通信結果のステータス
		//  引数のjqXHRは、XMLHttpRequestオブジェクト
		}).done(function(data1,textStatus,jqXHR) {
				$("#out1").html(jqXHR.status); //jqXHR.statusを表示
				$("#out2").html(textStatus); //textStatusを表示

				// 3. キーを指定して値を表示 
				$("#out4").html(data1["form"]["cs1"]);

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

				// 5.JSON形式の文字列をオブジェクトにし、
				// キーを指定して値(httpbin.org)を表示
				var data3 = JSON.parse(data2);
				$("#out5").html(data3["headers"]["Host"]);

		// 6. failは、通信に失敗した時に実行される
		}).fail(function(jqXHR, textStatus, errorThrown ) {
				$("#out1").html(jqXHR.status); //jqXHR.statusを表示
				$("#out2").html(textStatus); //textStatusを表示
				$("#out3").html(errorThrown); //errorThrownを表示

		// 7. alwaysは、成功/失敗に関わらず実行される
		}).always(function(){
				$("#out6").html("complete"); //表示3
				
	});
});
});
</script>
</head>
<body >
<p>jqXHR.statusを表示:<span id="out1"></span></p>
<p>textStatusを表示:<span id="out2"></span></p>
<p>errorThrownを表示:<span id="out3"></span></p>
<p>表示1:<span id="out4"></span></p>
<p>表示2:<span id="out5"></span></p>
<p>表示3:<span id="out6"></span></p>

<p>ボタンを押すと通信が始まります</p>

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

取得するJSON

以下のJSONを取得します。
上記コードの
34行目では、JSONの4行目の"form"と"cs1"を指定して値の"custom1"を取得しています。
43行目では、JSONの5行目の"headers"と12行目の"Host"を指定して値の"httpbin.org"を取得しています。

{"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.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"}

結果

成功した時の画面イメージです。
ステータスが200になっています。

 

失敗した時の画面イメージです。(存在しないURLを指定しました)
ステータスが404になっています。

関連の記事

jQuery $.getJSONで通信を行ってJSONを取得するサンプル
jQuery $.getで通信を行ってJSONを取得するサンプル
jQuery $.postで通信を行ってJSONを取得するサンプル
jQuery Deferredオブジェクトのサンプル

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


△上に戻る