変数にajaxの結果を入力する関数

Question

私はこのコードに問題があります。 これが起こります： console.logからコードを起動します。私が更新ボタン機能を押した場合、nullが返されます。

なぜこのようなことが起こりますか？ どうすれば修正できますか？

var urljson = "data_json.php"; 
var data = null; 
var jqXHR = $.ajax 
({ 
    type: "GET", 
    url: urljson, 
    dataType: 'json', 
    success: successHandler 

}); 
function successHandler(result) { 
    data = result; 
} 

function update(){ 
var jqXHR = $.ajax 
({ 
    type: "GET", 
    url: urljson, 
    dataType: 'json', 
    success: successHandler 

}); 
function successHandler(result) { 
    data = result; 
} 
} 

$(document).ready(function(){ 

console.log(data) //// null 

}); 


document.getElementById('update').addEventListener('click', function() { 

update(); 

console.log(data) //// Array [ Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, other 3213… ] 

}); 

Answer 1

ページのロード、update()が呼び出さ取得されていない、のでdataはnullです。あなたの関数呼び出しを$(document).ready()に追加すればうまくいくはずです。

Answer 2

$.ajax()結果は非同期で返されます。 successハンドラを使用するか、.then()を$.ajax()にチェーンして、requestから返された応答を処理します。 document.readyイベントで

function update() { 
    var jqXHR = $.ajax({ 
    type: "GET", 
    url: urljson, 
    dataType: "json", 
    success: successHandler  
    }); 

    function successHandler(result) { 
    data = result; 
    // do stuff with `data` here 
    console.log(data); 
    } 
} 

$(document).ready(update); 

jsfiddle https://jsfiddle.net/89jkzzyk/