Question

请参阅此JSFiddle：http://jsfiddle.net/cDVQP/1/

如果您同时拥有Chrome和Firefox，则可以看到它在Chrome中正常运行，但在Firefox Firebug控制台中，您会收到“TypeError：e is undefined” 在JSFiddle上，错误显示为“TypeError：obj is undefined”

我花了好几个小时追捕这个bug并试图解决它并最终放弃并来到这里。是什么导致了它？

以下是要测试的完整代码：

<html>
<body>

  <div id="x"></div>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script type="text/javascript">

    $(document).ready(function(){
      getVideos('cats');
    });

    function getVideos(query){
      var url = 'https://www.googleapis.com/youtube/v3/search?part=snippet&maxResults=2&q='+query+'&regionCode=us&type=video&fields=items(id)&key=AIzaSyCCOnozV0lEfnjfMTjpc4TFExAeIGJ6Fh0';
      $.ajax({
        url: url,
        success: function(data){
          appendVideos(data);
        }
      });
    }

    function appendVideos(data){
      // works here
      console.log(data);

      // but not in $.each
      $.each(data.items, function(i, item){
        $('#x').append(item.id.videoId + '<br>');
      });
    }

  </script>

</body>
</html>

Answer 1

我看起来数据作为字符串传递给appendVideos，而不是像你想象的那样传递给对象。我做了一个

for(i in data) {
    alert(i+'='+data[i]);
}

它就像一个字符串。

这解决了它：

$.ajax({
    url: url,
    dataType: 'JSON',
    success: function(data){
      appendVideos(data);
    }
  });
}

Answer 2

在jQuery 1.9.1的第622行发现错误。它是由您传递的对象undefined引起的。第622行调用obj.length，因为undefined没有称为长度的属性，它会抛出并出错。

在您的dataType: 'JSON'请求中添加$.ajax将解决此错误

Answer 3

除了其他答案，为什么不使用getJSON？

var url = 'https://www.googleapis.com/youtube/v3/search?part=snippet&maxResults=2&q='+query+'&regionCode=us&type=video&fields=items(id)&key=AIzaSyCCOnozV0lEfnjfMTjpc4TFExAeIGJ6Fh0';
$.getJSON(url, function(data) 
{
    appendVideos(data);
});

Answer 4

看起来jQuery不会在Firefox中自动将响应解析为json，而是将其解释为字符串。

如果您将成功功能更改为以下内容，则应该有效：

success: function(data){
    if(typeof(data) === 'string') {
        data = JSON.parse(data);
    }

    appendVideos(data);
}

$ .each在Firefox中引发错误（e未定义）但在Chrome中运行正常

4 个答案: