Ajaxの返り値を受け取ってからの処理

Question

###前提・実現したいこと
JavascriptとPHPを用いてMySQLを操作するアプリを作成しています.
まず,valueをもとにmySQL内のマスタテーブルからIDを取得し(getID),返ってきたIDをもとに
別のテーブルにデータをインサートしたい(insert_into_db)と考えています.

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

コードを実行してもmyIDがundefinedになってしまいます.
done内でconsole.logを使用して確認すると,MySQLからは正常にデータ取得できています.

###該当のソースコード
画面上のボタンをクリックすると以下を実行します.

var myID = getID(value);
var ret = insert_into_db(myID);

getID関数内は以下のようになり,Ajaxでデータを取得しています.

function getID(Key){

  $.ajax({
    type: "POST",
    dataType: "json",
    url:  "http://localhost/php/DB_getID.php",
    asyn: false,
    data:{
         k:Key
    },

  }).done(function(data, textStatus, jqXHR){

    //結果が0件の場合
    if(data == null) alert('データが0件でした');

    return data;

  }).fail(function(jqXHR, textStatus, errorThrown){
      alert('エラー');

  });

}

###試したこと
defferdやcompleteを使用しましたが,結果は変わりませんでした.
どこを改善すれば所望の結果を得ることができるでしょうか?

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

Comments

[kei344]

質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

Answer 1

こうですね

var value=123;
$.when(getID(value)).done(function(){
var myID = arguments[0];
var ret = insert_into_db(myID);
});

function getID(Key){
  var def= $.Deferred();
  $.ajax({
    type: "POST",
    dataType: "json",
    url:  "http://localhost/php/DB_getID.php",
    data:{k:Key},
    success:function(data, textStatus, jqXHR){
      if(data == null) alert('データが0件でした');
      def.resolve(data);
    },
    error:function(jqXHR, textStatus, errorThrown){
      alert(textStatus);
    },
  });
  //return def.promise(this); /*修正*/
  return def.promise();
}

すみません、一部修正しました

Comments

[masayoshi001]

ご回答ありがとうございます.
ご提示下さったコードで所望の結果を得ることが出来ました.
まだ理解が不十分な部分がありますので,学習を進めてまいります.

Answer 2

同期で動かすのはお勧めしません。（デベロッパーツールで警告が出ます）

どうしても使用するなら、下記のやり方で出来るとは思います（未検証）。（とりあえずdoneのfunction内でのreturnはgetIDのreturnとは違うのでundefinedになる）

【jQueryのajax()を利用すると返り値をとりたいときのやり方 - Qiita】
http://qiita.com/katsukii/items/bd64efcf4f070d77c028

非同期処理でも複雑な処理も出来るので、そちらに置き換えてはいかがでしょうか。

【JavaScriptの同期、非同期、コールバック、プロミス辺りを整理してみる - Qiita】
http://qiita.com/YoshikiNakamura/items/732ded26c85a7f771a27

【JavaScriptのPromiseで同期処理と非同期処理のタイミングを制御する（便利）】
https://www.wareko.jp/wordpress/?p=13612

Comments

[masayoshi001]

ご回答ありがとうございます.
yambejp様がご提示下さったコードで所望の結果を得ることが出来ました.
現状の理解度ではさらに難しい処理を実現することは出来そうにありませんので,
ご提示いただいたリンク先の内容を読んで勉強したいと思います.

Answer 3

http://qiita.com/sukobuto/items/0ee5026776e1bab10fb4

ここを御覧ください。まさにこの問題が書かれています。

Comments

[masayoshi001]

ご回答ありがとうございます.
リンク先を拝読いたしました.今回の質問と全く同じ内容ですね.
コードをコピーして実行しながら動作の理解をしていこと思います.

Answer 4

コードを実行してもmyIDがundefinedになってしまいます.

.done に設定した function が非同期で動くからうまくいかないのだと思います。

Comments

[masayoshi001]

ご回答ありがとうございます.
非同期での動作についての理解が不十分でした.
順序処理などを勉強し直してみます.