我已经编写了一个用于获取url的YouTube视频列表的C代码 “* http：//gdata.youtube.com/feeds/api/standardfeeds/ top_rated *“使用libsoup库。我可以使用libxml2解析返回的xml数据，并从中提取所需的字段。如何使用javascript获取并显示youtube视频列表

我想知道如何使用JavaScript来做同样的事情，并在浏览器上显示列表。我对JavaScript有非常基本的知识，但如果你们指出我正确的方向，我愿意付出所需的努力。

我从YouTube帮助文档了解以下有关youtube API的信息。

以所需的格式发送GET请求到URL提及。
响应将是XML或JSON-C画幅，这已被解析

我如何实现这两种使用JavaScript和显示使用HTML/JavaScript的呢？示例代码或任何链接都会有很大的帮助。

编辑：添加php标签为更好的可见性的问题，我认为PHP可能能够提供问题的提示。

TIA，

普利文在试着建议后

编辑如下：

如何调试呢？它似乎并不显示我打算登记的视频的标题。

<html> 
<head> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $("button").click(function(){ 
    $("body").append("<div id = 'data'><ul>jffnfjnkj</ul></div>"); 
    $.getJSON("http://gdata.youtube.com/feeds/api/standardfeeds/top_rated?callback=function&alt=jsonc&v=2", function(data) { 
     var dataContainer = $("#data ul"); 
     $.each(data.data.items, function(i, val) { 
     $("body").append("<div id = 'data'><ul>jffnfjnkj</ul></div>"); 
if (typeof(val.player) !== 'undefined' && typeof(val.title) !== 'undefined') { 
dataContainer.append("<li><a href = "+val.player.default+" target = '_blank'>"+val.title+"</a></li>"); 
     } 
     }); 
     }); 


    }); 
}); 
</script> 
</head> 

<body> 
<h2>Header</h2> 
<p>Paragrapgh</p> 
<p>Paragraph.</p> 
<button>Click me</button> 
</body> 
</html>

来源

2010-11-18 Praveen S

嗯，我使用jQuery，一个JavaScript框架，使一个GET请求，该网址掀起一些基本的东西了，JSONP格式检索数据。然后解析一些关于每个条目的基本信息（标题和链接），并将其附加到ID为data的div中的无序列表中，只要该条目的数据位不是未定义的即可。如果你将它粘贴在一个脚本标记中，并且在页面上加载jQuery并运行它，这将起作用。我不打算详细说明这是如何工作的，因为你说你愿意付出一些努力。但是我会让你从一些链接和基本解释开始。

该实施例利用了：

的AJAX概念，或异步JavaScript和XML。一组用于创建交互式Web应用程序的技术。在我们的示例中，特别是XMLHttpRequest，其中jQuery的jQuery.ajax是一个包装。 jQuery.getJSON是专门用于检索JSON或JSONP编码数据的jQuery.ajax的包装。
JSON的概念，或Javascript对象表示法，轻量级数据交换格式。您可以将其视为XML的无脂替代品。
JSONP或带填充符的JSON的概念。 JSONP不限于与通常的AJAX请求相同的策略。
jQuery javascript framework，一个优秀的JavaScript框架，用于dom操作和ajax请求，以及几乎所有其他有用的东西。
从jQuery的，这是用于检索JSON或JSONP数据，如在此实例中
从jQuery的该jQuery.each()方法，其可以被用于迭代任何通用集合，在这种情况下，JSON的jQuery.getJSON()方法。
jQuery的.append()方法，用于将内容追加到dom元素。
的jQuery Selectors的概念，这是真正的CSS选择器有一些额外的花俏。 jQuery使用选择器快速“选择”dom元素以便对它们进行操作。

没有进一步再见：

的实例

 $("body").append("<div id = 'data'><ul></ul></div>"); 
    $.getJSON("http://gdata.youtube.com/feeds/api/standardfeeds/top_rated?callback=?&alt=jsonc&v=2", function(data) { 
     var dataContainer = $("#data ul"); 
     $.each(data.data.items, function(i, val) { 
      if (typeof(val.player) !== 'undefined' && typeof(val.title) !== 'undefined') { 
       dataContainer.append("<li><a href = "+val.player.default+" target = '_blank'>"+val.title+"</a></li>"); 
     } 
     }); 
    });

这应该是足以让你 “指出了正确的方向。”如果您有任何问题，请发表评论，我会尽力回答他们。

来源

2010-11-18 06:59:46 Alex

感谢您的回复。回调应该是什么？该代码不会加载任何内容。请检查我的编辑。 – 2010-11-28 15:08:36

我想知道我写的代码有什么问题。它至少应该显示极简主义的东西。 – 2010-11-28 15:12:22

是的，可以^^

在YouTube-API还提供JSONP，它返回数据作为JS-命令。
关注此（并查看URL里面的参数）：
http://gdata.youtube.com/feeds/api/standardfeeds/top_rated?alt=json&callback=someFunction

随着JSONP你没有任何sameOriginPolicies的限制，虽然它不是Ajax的工作原理。

使用像jQuery这样的库很容易。

如果你不想使用jQuery或类似的东西，你必须注入一个<script>-element元素作为src-attribute的URL，并创建一个函数（使用上面的URL必须命名“someFunction”）与数据一起工作。

来源

2010-11-18 06:38:36

其中一些术语对我来说是新的。我如何使用JavaScript发送请求？我如何解析返回的js命令？ – 2010-11-18 06:42:52

YouTube API支持JSONP（带有填充的JavaScript对象表示法）。 JSONP允许您提出外部站点请求以获取数据。但你并不需要知道这一切。基本的想法是你注入一个带有请求的脚本标签作为src属性。

但是现在，你并不需要这么做，除非你想学习硬核的Javascript。该代码全部为您精彩的JavaScript库编写。我建议你使用jQuery来制作JSONP请求。 jQuery是一个简单的库，可以通过向HTML文档添加一行代码来使用它。

一旦你jQuery的建立和运行，你可以使用的getJSON命令解析JSONP数据。此时，您将获得一个包含所需数据的对象，并且您可以选择要如何输出数据。

来源

2010-11-18 06:46:01 Kranu

如何使用javascript获取并显示youtube视频列表

回答

的实例

相关问题