頁面加載時未定義的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']); 在接收到ajax響應之前，將執行getCitiesList2中的。 在var bla = getCitiesList(); 分配時， bla基本上保留了一個延遲對象 。 您需要做的就是分配一個回調函數，該函數將在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>