[jQuery] $.ajaxのコールバック関数にcontextで値を渡す

jQueryの$.ajaxメソッドのコールバック関数の引数はあらかじめ決まっています。doneメソッドならdata, textStatus, jqXHRが渡されます。

では、コールバック関数に任意の値を渡したい場合はどうすれば良いか？

// “ホゲホゲ”をコールバック関数に渡したいが…
var a = 'ホゲホゲ';

$.ajax({
  url:'foo.html',
  type:'GET',
  dataType:'jsonp',
}).done(function(data, textStatus, jqXHR){
  // コールバック関数の引数はあらかじめ決まっている
  // ではどうすれば良いか？
});

この場合はcontextを使います。$.ajaxメソッドのオプションでcontextを指定すると、その値がコールバック関数内のthisとして受け取れるようになります。

$.ajax({
  url:'foo.html',
  type:'GET',
  dataType:'jsonp',
  context:'ホゲホゲ',// contextを指定する
}).done(function(data, textStatus, jqXHR){
  // contextで指定した値がthisとして受け取れる
  alert( this );// “ホゲホゲ”と表示される
});

contextにはオブジェクトや配列を指定することも可能です。複数の値をコールバックに渡したい時はオブジェクトを使います。

$.ajax({
  url:'foo.html',
  type:'GET',
  dataType:'jsonp',
  // contextはオブジェクトを渡すことも可能
  context:{
    type:'テスト',
    text:'ホゲホゲ'
  },
}).done(function(data, textStatus, jqXHR){
  alert( this.type );// “テスト”と表示される
});

$.ajaxを呼び出すきっかけになったエレメントそのものを渡したい場合なら以下のようになります。

<button id='btn'>クリック</button>

<script type='text/javascript'>
$('#btn').click(function(){
  $.ajax({
    url:'foo.html',
    type:'GET',
    dataType:'jsonp',
    // contextはオブジェクトを渡すことも可能
    context:this,
  }).done(function(data, textStatus, jqXHR){
    alert( $(this).text() );// “クリック”と表示される
  });
});
</script>

また、グローバル変数を使うことでコールバックに値を渡すことも可能なのですが、それが避けるべきコードであることは言うまでもありません。