jQueryの$.ajaxでJSONPデータを読み込んで表示するプログラム

jQuery・JS

jQueryの$.ajaxを使い別ドメインのサーバーに配置したJSONPファイルを読み込んでデータを表示するプログラムで、$.ajaxを実際に試してみたいときに動くのか動作確認をする時のサンプル。

jsonp.js(別ドメインに配置するJSONP形式のデータ内容のファイル)

mycallback({
		"title": "jsonp",
		"description": "jsonp test"
})

ajax.html

$.ajaxにオブジェクト形式でパラメータを設定して正常に通信に成功すると、.doneで結果を処理(アラートでjsonp.jsのデータを表示)して、失敗すると.failを実行してアラート(error)を表示します。

url:アクセスして読み込むファイルのURLを設定。
dataType:jsonp形式のデータを扱うのでjsonpにする。
jsonpCallback:コールバック名にjsonp.jsに設定したコールバック名を入力。

$(function() {
	$.ajax({
		url:'http.example.com/jsonp.js',
		dataType: 'jsonp',
		jsonpCallback: 'mycallback',
	})
	.done(function(data) {
		alert(data.title);
	})
	.fail(function(data) {
		alert('error');
	});
});
スポンサーリンク

コメント

タイトルとURLをコピーしました