當頁面加載時未定義ajax響應

Question

我有一個腳本，下面，當頁面加載我得到一個錯誤消息：Cannot read property 'length' of undefined，所以我研究了錯誤，發現AJAX請求沒有執行。如果我在瀏覽器控制檯中執行相同的代碼，該腳本可以正常工作。我的代碼有什麼問題？

<script> 

function getCitiesList() { 
    var country_id = '189'; 
    return $.ajax({ 
    type: 'get',//тип запроса: get,post либо head 
    url: '/countries/' + country_id + '/cities' + "&authenticity_token=" + AUTH_TOKEN, 
    }); 
} 

function getCitiesList2() { 
    var bla = getCitiesList(); 
    console.log(bla['responseJSON']); 
    var i = 0; 
    var data = []; 
    while (i < bla['responseJSON'].length) { 
    data[i] = {}; 
    data[i]['id'] = bla['responseJSON'][i]['id']; 
    data[i]['text'] = bla['responseJSON'][i]['title']; 
    i++; 
    } 
    console.log(data); 
} 


$('#city').select2({ 
    data: getCitiesList2(), 
    width: "100%" 
}); 

</script> 

Answer 1

由於JavaScript是異步語言，它只是繼續運行，並不等待AJAX​​返回結果。

在您的代碼中，getCitiesList2函數的第一行指定了AJAX調用的返回值。 AJAX返回後面和var bla還沒有響應。要解決這個問題，您可以將回調傳遞給您的AJAX功能getCitiesList，並在AJAX成功時執行它。

function getCitiesList(callback) { 
    var country_id = '189'; 
    $.ajax({ 
    type: 'get',//тип запроса: get,post либо head 
    url: '/countries/' + country_id + '/cities' + "&authenticity_token=" + AUTH_TOKEN, 
    success: function(result) { 
     callback(result); 
    } 
    }); 
} 

function getCitiesList2() { 
    getCitiesList(function(result) { 
    var i = 0; 
    var data = []; 
    while (i < result['responseJSON'].length) { 
     data[i] = {}; 
     data[i]['id'] = result['responseJSON'][i]['id']; 
     data[i]['text'] = result['responseJSON'][i]['title']; 
     i++; 
    } 
    }); 
} 

Answer 2

的問題是，在console.log(bla['responseJSON']);getCitiesList2接收到AJAX響應之前被執行。在var bla = getCitiesList();賦值後，bla基本上保持deferred object。所有你需要做的就是分配一個回調函數，這個函數在ajax調用返回時執行。

<script> 

function getCitiesList() { 
    var country_id = '189'; 
    return $.ajax({ 
    type: 'get',//тип запроса: get,post либо head 
    url: '/countries/' + country_id + '/cities' + "&authenticity_token=" + AUTH_TOKEN, 
    }).done(function(data){   
    $('#city').select2({ 
     data: processCitiesResponse(data), 
     width: "100%" 
    }); 
    }); 
} 

function processCitiesResponse(data) 
{ 
    console.log(data); 
    var i = 0; 
    var options = []; 
    while (i < data.responseJSON.length) { 
     options[i] = {}; 
     options[i].id = data.responseJSON[i].id; 
     options[i].text = data.responseJSON[i].title; 
     i++; 
    } 
    console.log(options); 
} 


</script> 

Answer 3

第一個和第二個答案沒有幫助，同樣的問題。

這項工作：

<script> 
           var AUTH_TOKEN = $('meta[name=csrf-token]').attr('content'); 
           function Blabla(){ 
           var country_id = '189'; 
           $.ajax({ 
            type: 'get', 
            url: '/countries/' + country_id + '/cities' + "&authenticity_token=" + AUTH_TOKEN, 
            success: function(bla){ 
            var i = 0; 
            var data = []; 
            while (i < bla.length) { 
             data[i] = {}; 
             data[i]['id'] = bla[i]['id']; 
             data[i]['text'] = bla[i]['title']; 
             i++; 
            } 
            $('#city').select2({ 
             data: data, 
             width: "100%" 
            }); 
            } 
           }); 
           } 
           Blabla(); 
          </script>