読者です 読者をやめる 読者になる 読者になる

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

JavaScript

favurlのurlをtweetする機能のtestをしていたら、This request looks like it might be automated. To protect our users from spam and other malicious activity, we can't complete this action right now. Please try again later. とか言われて待機時間ができたので書いた。

jQueryAjax()で返り値がとれない!?

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

function test(){
    $.ajax({
        type: 'GET',
        url: 'http://kitagawa.keiko'
        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://kitagawa.keiko',
        async: false
    }).responseText;
    return result;
}

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

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

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

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

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

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