Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
jQuery逆引きリファレンス

jQuery逆引きリファレンス

Ajax通信で成功/失敗コールバックに任意の値を渡すには?($.ajax[context])

2017年1月26日

主にコールバック関数に任意の値を引き渡す目的で使える「$.ajaxメソッドのcontextパラメーター」の基本的な使い方を説明する。

  • このエントリーをはてなブックマークに追加

 別稿「TIPS:一般的なAjax通信を実装するには?」では、$.ajaxメソッドを利用したAjax通信の基本について解説しました。本稿では、引き続き、その動作パラメーターの一つであるcontextについて解説します。contextパラメーターで指定されたオブジェクトには、各コールバック関数の配下でthisとしてアクセスできるようになります。これを利用することで、コールバック関数に任意の値を引き渡すことが可能になります。

 例えば以下は、contextパラメーター経由で背景色(backgroundプロパティ)を渡す例です。指定された値は、サーバーサイドから取得したコンテンツをページに反映する際に利用します。

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<form>
  <input type="button" id="btn" value="コードの表示" />
  <pre id="result"></pre>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function() {
  // ボタンクリック時に指定されたファイルを読み込み、その内容を表示
  $('#btn').click(function() {
    $.ajax('ajax.html',
      {
        type: 'get',
        dataType: 'html',
        // 1コンテキストとして引き渡すオブジェクト
        context: {
          backcolor: '#F99'
        }
      }
    )
    // 2指定されたカラーで背景色を設定
    .done(function(data) {
      $('#result').css('background-color', this.backcolor)
        .text(data);
    });
  });
});
</script>
</body>
</html>
成功/失敗コールバック関数に任意の値を引き渡すコード(context.html)
指定されたカラーで背景色を付与

 contextパラメーターには、任意のオブジェクトを引き渡すことが可能です(1)。ここでは、backgroundプロパティ(文字列型)を1つだけ持った匿名オブジェクトを指定していますが、もちろん、必要に応じて複数のプロパティ、任意の型の値を指定することも可能です*1

 contextパラメーターで与えられたオブジェクトは、そのままコールバック関数内のthisとしてアクセスできるようになります。

  • *1 そもそ単純な値を渡すだけであれば、contextパラメーターに文字列や数値をそのまま渡しても構いません。しかし、コードの分かりやすさ、後々にパラメーターを増やしたいという場合に備えて、普通はオブジェクトとして受け渡すのが吉です。
処理対象:基本 カテゴリ:Ajax
API:jQuery.ajax() カテゴリ:Ajax > Low-Level Interface(低レベルインターフェース)

※以下では、本稿の前後を合わせて5回分(第61回~第65回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

jQuery逆引きリファレンス
61. Ajax通信の前に処理を実行するには?($.ajax[beforeSend])

Ajax通信を送信する前に任意の処理を実行できるようになる「$.ajaxメソッドのbeforeSendパラメーター」の基本的な使い方を説明する。

jQuery逆引きリファレンス
62. Ajax通信で得られたコンテンツを加工するには?($.ajax[dataFilter])

$.ajaxメソッドにより得たコンテンツをdoneメソッドで処理する前に加工/編集できる「$.ajaxメソッドのdataFilterパラメーター」の基本的な使い方を説明する。

jQuery逆引きリファレンス
63. 【現在、表示中】≫ Ajax通信で成功/失敗コールバックに任意の値を渡すには?($.ajax[context])

主にコールバック関数に任意の値を引き渡す目的で使える「$.ajaxメソッドのcontextパラメーター」の基本的な使い方を説明する。

jQuery逆引きリファレンス
64. アニメーションを一時停止するには?(delay)

実行中のアニメーションを途中で一時停止するdelayメソッドの基本的な使い方を説明。delayメソッド特有の問題点も取り上げる。

jQuery逆引きリファレンス
65. イベントリスナーをそのままに、要素を削除するには?(detach)

イベントリスナーを破棄せず維持した状態で要素を削除し、再生成時に元通りにする方法を説明。削除/再生成ではなく、非表示/表示の利用推奨についても言及する。

サイトからのお知らせ

Twitterでつぶやこう!