使用AJAX檢索外部成功函數的JSON數據

Question

我將使用AJAX存儲的JSON存儲到外部變量以供進一步使用時遇到問題。 我已經檢查了這個答案（將json加載到變量中 ），這是非常基本的，但我做錯其他的事情。 我的代碼如下。

function showZone() {
var data=null;
$.ajax({
            url: 'http://localhost/gui/templates/tracking/show_zones.php',
            //data: 'userid='+ uid ,
            contentType: "application/x-www-form-urlencoded; charset=utf-8",
            dataType: "json",
            type: "POST",
            success: function(json) {
                data=json;
                $( '#res1' ).html( data[0].swlat );  

            }
 }); 
 return data;

}

function showZones() {
    var data=showZone();
    $( '#res2' ).html( data[0].swlat );  
}

為了更清楚地了解我的問題，我有兩個div（＃res1＆＃res2），我打印數據。 在＃res1中，我得到了想要的結果，但是#res2沒有打印任何東西，我得到一個錯誤'未捕獲的TypeError：無法讀取null'的屬性'0'。 因此，在ajax將其存儲在變量中之前返回數據。 這是問題，還是我應該以不同的方式將json存儲到變量中？ 任何幫助贊賞:)

Answer 1

你可以使用callback（） 。 請考慮以下代碼段：

function showZone() {
    var data = null;
    $.ajax({
        url: 'http://localhost/gui/templates/tracking/show_zones.php',
        //data: 'userid='+ uid ,
        contentType: "application/x-www-form-urlencoded; charset=utf-8",
        dataType: "json",
        type: "POST",
        success: function(json) {
            data = json;
            showZones(data);//callback

        }
    });
    //return data; No need to return data when we have async ajax

}
showZone(); // call when you want to make ajax call
function showZones(data) { // This function will call after ajax response
    $('#res2').html(data[0].swlat);
}

Answer 2

$ .ajax立即return data ，該return data在您傳遞的函數之前執行，因為甚至調用了成功回調。因此返回為未定義.Its表示您無法返回ajax數據。

有關更多示例如何從異步調用返回響應？

但為什么你不能簡單地使用

  success: function(json) {
            data=json;
            $( '#res1' ).html( data[0].swlat );  
            $( '#res2' ).html( data[0].swlat ); 
        }