例えば、ループの中で呼び出すために関数化して、そこで普通にajaxを使おうとするとうまくいきません。
少しソースに工夫が必要です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
for(var i = 0; i < 10; i++){ var result = testalert(); alert(result); // undefined } function testalert(){ $.ajax({ type: 'GET', url: 'http://URL' dataType: 'text', success: function(result){ return result; }, error: function(result){ return result; }); } |
上記のようなソースだとajaxできちんと値が取得できたとしてもalert(undefined)がループ分表示されるだけです。
原因は非同期通信はレスポンスが返る前に次の処理にいくため。
解決方法は2つあります。
①同期通信にしてしまう
少し通信に時間がかかりフロントに影響してしまう可能性があるようですが、
同期通信してしまうと解決してしまいます。
|
1 2 3 4 5 6 7 8 |
function testalert(){ var result = $.ajax({ type: 'GET', url: 'http://URL', async: false // デフォルトはtrue }).responseText; return result; } |
②doneとfailを使う
こちらは非同期通信のままレスポンスが返ってきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
for(var i = 0; i < 10; i++){ testalert().done(function(result) { alert(result); }).fail(function(result) { alert(result); }); } function testalert(){ return $.ajax({ type: 'GET', url: 'http://URL' }) } |