【jQuery】Ajaxで実行した戻り値が反映されない

jQueryを使ってPHPで実行した戻り値が反映されない！

$(function() {
  var str = $.fn.hoge("hoge");
  alert(str);
}
$.fn.hoge = function(str) {
  var request = $.ajax({
    type: 'GET',
    url: '/xxx/',
    cache: false,
    dataType: 'json',
    timeout: 3000
  });
  request.done(function(data){
    return data;
  }
}

Ajaxでプログラムを実行したのち、jQueryの呼び出し元へreturnするとalertでundefinedと値が返ってきてしまいました。

Ajaxは非同期処理

言われてみれば当たり前なんですけどAjaxは非同期処理なのでプログラムの実行結果を待たずに、jQueryのalertが実行されてしまい、結果undefinedが表示されていました。

そのため今回は非同期にさせないために「コールバック」で対応しました。

$(function() {
  var callback = function(result) {
    alert(result);
  }
  $.fn.hoge("hoge", callback);
}
$.fn.hoge = function(str, callback) {
  var request = $.ajax({
    type: 'GET',
    url: '/xxx/',
    cache: false,
    dataType: 'json',
    timeout: 3000
  });
  request.done(function(data){
    callback(data)
  }
}

こうすることで$.fn.hogeの結果を受け取って後続の処理をすることが可能になりました。