使用 jQuery 将 XML 中的搜索结果放入数组中

Question

我之前问了另一个问题，并设法获得了一些可以从 YouTube 搜索查询中获取 XML 文件的代码的帮助。然后，使用 jQuery，从 XML 文件（视频 ID）中获取所需的信息并将其放入 javascript 变量中。

这很好，但我希望（如果可能的话）我们的网站有来自该频道的最新视频不是 1 个而是 3 个。有人建议我更改搜索以获取 3 个结果而不是 1 个，并将 jQuery .find() 结果放入一个数组中。

问题是我认为（我真的应该说我确定）我做错了......看看：

<!-- enable jQuery -->
<script type="application/javascript" src="jquery.js"> </script>

<!-- video loading functions -->
<script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery.ajax('https://gdata.youtube.com/feeds/api/videos?author=inthegamesroom&orderby=published&prettyprint=true&start-index=1&max-results=3&v=2',{
      dataType:'xml',
      success: function(data,status, xhr ) {
      var $data =$(data);
      var videoTag = new array ($data.find('videoid'));
      var videoId1 = videoTag[0].text();
      var videoId2 = videoTag[1].text();
      var videoId3 = videoTag[2].text();
    }
  });       
  // YouTube Video embed command
  function embedYT1(id, loaction) {
    jQuery(location).append("<object width=\"1000\" height=\"563\"><param name=\"movie\" value=\"https://www.youtube.com/v/"+id+"?version=3&amp;hl=en_US\"></param><param name=\"allowFullScreen\" value=\"true\"></param><param name=\"allowscriptaccess\" value=\"always\"></param><embed src=\"https://www.youtube.com/v/"+id+"?version=3&amp;hl=en_US\" type=\"application/x-shockwave-flash\" width=\"1000\" height=\"563\" allowscriptaccess=\"always\" allowfullscreen=\"true\"></embed></object>")
  }

  // Call video embed function for 3 vids
  embedYT(videoId1, '#vid1');
  embedYT(videoId2, '#vid2');
  embedYT(videoId3, '#vid2');
});
</script>

有人可以帮忙吗？

您可能还注意到我有一个 embedYT 功能，旨在嵌入 3 个视频。我做对了吗？ （我的表标签中有三个id='vid#'。

Answer 1

好的，这里有些问题。不要为此感到难过。您正在学习并且通常会犯错误:)

首先，变量videoId1、videoId2 和videoId3 是声明它们的函数的本地变量，因此当您调用embedYT(videoId1) 和以后的函数时它们将不可见。

其次，即使在调用embedYT 函数时，您在成功回调中设置的值是全局变量（请尽量不要在Javascript 中声明全局变量）。这些函数在页面加载后立即执行，这可能发生在执行 AJAX 回调之前。为了解决这个问题，我们需要将 embedYT 调用移至回调

第三，$.fn.find() 返回一个 jQuery 集合（类似于数组的东西），因此不需要将结果放入其他数组中。此外，查看来自youtube API 的响应，您应该找到的标签是“yt:videoid”，而不是“videoid”（其命名空间）。 In this page 我找到了使用 jQuery 执行此操作的正确语法。让我们解决这两个问题：

var videoTag = $data.find('yt\\:videoid');

修复后，我们可以在回调中使用$.fn.each 迭代集合，并为每个元素调用embedYT，从而解决第二个问题：

...
success: function(data,status, xhr ) {
  var $data =$(data);
  var videoTag = $data.find('yt\\:videoid');

  videoTag.each(function(i) {
    embedYT($(this).text(), '#vid' + i);
  });

}
...    

迭代集合比访问每个元素更具未来性。如果您必须更改视频数量，则可能无需更改 javascript 即可工作。

所以最终的代码应该是这样的

<!-- enable jQuery -->]
<script type="application/javascript" src="jquery.js"> </script>

<!-- video loading functions -->
<script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery.ajax('https://gdata.youtube.com/feeds/api/videos?author=inthegamesroom&orderby=published&prettyprint=true&start-index=1&max-results=3&v=2',{
      dataType:'xml',
      success: function(data,status, xhr ) {
        var $data =$(data);
        var videoTag = $data.find('yt\\:videoid');

        videoTag.each(function(i) {
          embedYT($(this).text(), '#vid' + i);
        });

      }
    });     

    // YouTube Video embed command
    function embedYT(id, loaction) {
      jQuery(location).append("<object width=\"1000\" height=\"563\"><param name=\"movie\" value=\"https://www.youtube.com/v/"+id+"?version=3&amp;hl=en_US\"></param><param name=\"allowFullScreen\" value=\"true\"></param><param name=\"allowscriptaccess\" value=\"always\"></param><embed src=\"https://www.youtube.com/v/"+id+"?version=3&amp;hl=en_US\" type=\"application/x-shockwave-flash\" width=\"1000\" height=\"563\" allowscriptaccess=\"always\" allowfullscreen=\"true\"></embed></object>")
    }

  });
</script>

希望对你有帮助