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>

页面加载时未定义的ajax响应

3 个答案: