人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

jqueryでAjaxの質問です。

$('selector').on("click",
function(){
$.get("hoge.php", {num: num},
function(xmlhttpreq){
modorich = なんか処理(xmlhttpreq);
}
);
$(this).animate({left: 0},
complete:function(){
var hensu = modorich;
}
);
}
);

で、上記の$.getで取得したmodorich を抜けた後のhensuに入れたいのですが、
どうすれば入りますか?
returnとかを使うのでしょうか。
ちなみに$.getのfunction内に入れる、というのはなしでお願いします。

●質問者: khaie
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● だわかき
●0ポイント

functionの全体がわからないですが、modorichをグローバル変数にして、こんな感じで渡せると思います。

$('selector').on("click",
 function(){
 var modorich;
 $.get("hoge.php", {num: num},
 function(xmlhttpreq){
 modorich = なんか処理(xmlhttpreq);
 }
 );
 $(this).animate({left: 0},
 complete:function(){
 var hensu = modorich;
 }
 );
 }
 );

khaieさんのコメント
これではhensuはundefinedになってしまいます。

2 ● a-kuma3
●0ポイント

変数の代入がどうとか言うことではなく、Ajax が非同期で動作するから「値が渡らない」みたいになってるんです。
同期モードでリクエストを出す必要があります。

$('selector').on("click",
 function(){
 var modorich;
 $.ajax({
 url: "hoge.php",
 type: "GET",
 async: false,
 data: "num=" + num,
 success: function(xmlhttpreq){
 modorich = なんか処理(xmlhttpreq);
 }
 }
 );
 $(this).animate({left: 0},
 complete:function(){
 var hensu = modorich;
 }
 );
 }
);

関連するマニュアルは、これ。
http://api.jquery.com/jQuery.ajax/

ちなみに$.getのfunction内に入れる、というのはなしでお願いします。

どのような事情で、この制約が付いているのか分かりませんが、変数のスコープとか、処理のタイミングとかについてきちんと理解できるまでは、みんなと同じ書き方をするようにした方が良いですよ。

$('selector').on("click",
 function(){
 var obj = $(this);
 $.get("hoge.php", {num: num},
 function(xmlhttpreq){
 var modorich = なんか処理(xmlhttpreq);
 obj.animate({left: 0},
 complete:function(){
 var hensu = modorich;
 });
 }
 );
 }
);

khaieさんのコメント
やはり同期の部分ですよね。 実際は全体としてはアニメーションを表現しているので、 同期待ち?をしたくなかったのです。 $.ajax($.get)の中のcomplete(success) function の中で$(this)を使いたかったのですが、parent、先祖子孫?等を使っても辿れません。 "click"された"this"が存在しない気が・・・ ↑の"selector"がajax後のfunctionでthis系で表現できれば、 それでもOK回答とします。

a-kuma3さんのコメント
>> $.ajax($.get)の中のcomplete(success) function の中で$(this)を使いたかったのですが、parent、先祖子孫?等を使っても辿れません。 "click"された"this"が存在しない気が・・・ ↑の"selector"がajax後のfunctionでthis系で表現できれば、 それでもOK回答とします。 << そんな気もしたので、ふたつ目に書いたソースでは、 -onclick のハンドラで、$(this) を、変数 obj に入れる -$.get の success では、クリックされた要素 (の jQuery オブジェクト) として obj を使う というふうにしてあります。 クリックするものがたくさんあるのだったら、クリックされた要素はクロージャのスコープに入れておいた方が良いかも。 こんな感じ。 >|javascript| $('selector').on("click", function(){ var f = (function() { var obj = $(this); return function(xmlhttpreq) { var modorich = なんか処理(xmlhttpreq); obj.animate({left: 0}, complete:function(){ var hensu = modorich; }); } })(); $.get("hoge.php", {num: num}, f); } ); ||<

3 ● Lhankor_Mhy
●100ポイント ベストアンサー

Defferedオブジェクトを使うといいですよ。
↓サンプル
http://jsfiddle.net/aNaS3/


Lhankor_Mhyさんのコメント
Deferredでしたねorz

khaieさんのコメント
使うことはおろか、調べもしていなかった機能でした。 勉強になります。 いただいたサンプルでは $.getは抜けてhensuには入っていますが、 $(this).animate()内のcomplete functionでは使えていないです。

Lhankor_Mhyさんのコメント
$.when(work1,work2).then(work3) ↑これはwork1とwork2の両方が完了するのを待ち合わせてから、work3を実行するものです。実質的に問題ないと思います。 たしかに原型を崩してしまいましたが、「非同期通信してる間にアニメーション処理させて両方終わったら通信結果を表示」という使い方をしたいのかな? という推測でアレンジしました。お気に召していただけなかったようで残念です。 ちなみに、このやり方ですとthisを利用する部分でスコープが変わらないので、イベント時の内容で使えるはずです。

Lhankor_Mhyさんのコメント
こういう書き方もできます。参考までに http://jsfiddle.net/aNaS3/2/

Lhankor_Mhyさんのコメント
いろいろ整理した結果、こうなりました。すっきり。 http://jsfiddle.net/aNaS3/3/

khaieさんのコメント
仕組みがまだよくわかりませんが、when、thenでできました。 ありがとうございます。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ