jQueryのajax()で返り値を得る方法

jQueryのAjax()で返り値がとれない!?

こんなふうに書くと返り値はundefinedになってしまう。

function test(){
    $.ajax({
        type: 'GET',
        url: 'http://hoge.fuga'
        dataType: 'text',
        success: function(response){
            return response;
        },
    	error: function(response){
            return response;
    	});
}

var result = test(); // undefined

これはajax()がデフォルトでは非同期通信をするためである。非同期通信とは、レスポンスが返って来る前に次の処理に行くことである。だから返り値を返す前に次の処理に行ってしまう。

解決策

1. 同期通信にしちゃう

async: falseとすると、同期通信になる。

function test(){
    var result = $.ajax({
        type: 'GET',
        url: 'http://hoge.fuga',
        async: false
    }).responseText;
    return result;
}

var result = test() //ちゃんと返り値が入ってる;

でも同期通信の場合は時間がかかる処理をすると、その間UIがロックされてしまう。
なのであまりやらない方がいい。

2. .done(), .fail()をつかう

function test(){
    return $.ajax({
        type: 'GET',
        url: 'http://hoge.fuga'
    })
}

test().done(function(result) {
    なんか処理
}).fail(function(result) {
    なんか処理
});

これだと、非同期通信のまま返り値を得ることができる。こっちの方がおすすめ。

参考文献

javascript - How to return the response from an asynchronous call? - Stack Overflow
jQueryのDeferredを用いたモダンなAjax処理の書き方 - Hack Your Design!