クリックイベントでajax()の返り値を表示

Question

前提・実現したいこと

jQueryを使って、クリックイベント　→　ajax通信　→　返り値で他の処理
という流れを作ろうと思っています。
クリックイベントと.then()の組み合わせ方が分からず苦戦しております。

発生している問題・エラーメッセージ

Uncaught TypeError: Cannot read property 'then' of undefined

該当のソースコード

function showData(data){
  return 'This is Ajax: ' + data;
}

function getData(){
  if(confirm("Are you sure？")){
   var data = JSON.stringify( myArray );
   $.ajax({
            url: "get_data.php",
            type: "POST",
            dataType: "json",
            data: data
          })
          .done( (data) => {
            console.log("ajax success");
          })
          .fail(function(XMLHttpRequest, textStatus, errorThrown){
            console.log("ajax error");
            console.log("XMLHttpRequest : " + XMLHttpRequest.status);
            console.log("textStatus     : " + textStatus);
            console.log("errorThrown    : " + errorThrown.message);
          });
    }
}

$('#get_data_btn').on('click', function(){
   getData().then(function(data){
      var returned_data = showData(data);
      console.log(returned_data);
   })
});

試したこと

ajax通信自体にエラーはないので、あとは書き方の問題？かと思うのですが、正解にたどり着けずにおります。ご教授いただけると助かります。

Comments

[m.ts10806]

そもそもgetData()内のajaxのdata引数のdataが未定義変数ですが、これは？

[kikiu]

説明が不十分でした。定義部分を追加しました。

[x_x]

then() が出てくるのは、jQuery ではなくネイティブの Promise を使いたいという意思なのでしょうか？

[m.ts10806]

myArray 　も突然出てきているので同じですよ・・・。

[kikiu]

PromiseかDeferredを使うんだろう、というところまではたどり着けたのですが
実際にどう使ったらいいのか分かりません・・・

Answer 1

一番簡単なのは getData で $.ajax を返すことですが、

return $.ajax({ ... });

if で通らなかったりするなら別途 Deferred を用意して返してあげるといいかも知れません。

https://api.jquery.com/category/deferred-object/

Answer 2

見た感じ、$.ajaxがjsonデータを受け取っているので、
そのままshowDataに渡してもちゃんと表示されなそうですね
get_dataにわたすmyArrayも未定義なので検証ができません
（一応便宜上空データを渡してあります）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  $('#get_data_btn').on('click', function(){
    getData().then(function(data){
      var returned_data = showData(data);
      console.log(returned_data);
    });
  });
});
function showData(data){
  return 'This is Ajax: ' + data;
}

function getData(){
  var d=$.Deferred();
  var data = [];
  $.ajax({
  url: "get_data.php",
  type: "POST",
  dataType: "json",
  data: data
  }).done(function(data){
    d.resolve(JSON.stringify(data));
  });
  return d.promise();
}
</script>
<input type="button" id="get_data_btn" value="get">

Comments

[kikiu]

無事にやりたいことが実現できました！
Deferredの使い方でずっとつまづいていたのですが、やっと理解できました！
ありがとうございました。