AJAXでコンテンツを取得して画面に表示_ブログ_zanmai.net

当記事はjqueryのajax非同期でコンテンツを取得して画面に表示の方法です。
既に検証済みのコードを貼り付けるので、ぜひご活用ください。

下記の例では、非同期でページのQRコード画像を独自のWEBAPIから取得し、id=page-qrcode-imgのタグに表示する。
もちろん、該当方法も後ほど筆者運営しているbenri.jpサイトに適用する予定です。

$.fn.getPageQrcode = function (pageUrl,pageKey) {
  var send_data = {page_url:pageUrl,page_key:pageKey};
  // QRCode作成のWebAPI
  var webApi = "//www.benri.jp/calendar/umiwake";
	$.ajax({
    type: "POST",
		url: webApi,
		dataType: "text",
		data: send_data,
	})
	.done(function(response) {
    $('#page-qrcode-img').empty();
    $('#page-qrcode-img').append(response);
    return false;
  })
	.fail(function(XMLHttpRequest, textStatus, errorThrown) {
    console.log(XMLHttpRequest.status + ' : ' + errorThrown);
		return false;
	});
};