如何使用JavaScript获取并显示YouTube视频列表 [英] How to Get and display the list of youtube videos using javascript
问题描述
我已经使用libsoup库编写了一个C代码，用于获取url
* http：//gdata.youtube.com/feeds/api/standardfeeds/top_rated*的youtube视频列表。
我可以使用libxml2解析返回的xml数据，并从中提取所需的字段。
我想知道如何使用javascript和display来执行相同的操作浏览器上的列表。我对JavaScript有非常基本的知识，但是我愿意付出所需的努力，如果你们让我指向正确的方向。
我从Google帮助了解以下内容
- 发送所需格式的GET请求到url提及。
- 响应将是xml或json-c格式，并且必须进行解析
如何使用javascript和display来实现这两种方式HTML / JavaScript的？示例代码或任何链接将有很大的帮助。
编辑：添加php标签为更好的可见性的问题，我认为PHP可能能够提供问题的提示。
TIA，
Praveen S
在尝试下面给出的建议后编辑：
我如何调试？
它似乎没有显示我打算登记的视频的标题。
< html>
< head>
< script type =text / javascriptsrc =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？函数（data）{
var dataContainer = $（＃data ul）;
$ .each（data.data.items，function（ ）;
（body）。append（< div id ='data'>< ul> jffnfjnkj< / ul>< / div>）;
if（typeof（val.player）！=='undefined'&& typeof（val.title）！=='undefined'）{
dataContainer.append（< li>< a href = < / li>）;
}
}）;
}）;
}）;
}）;
< / script>
< / head>
< body>
< h2>标头< / h2>
< p> Paragrapgh< / p>
< p>段落。< / p>
<按钮>点击我< /按钮>
< / body>
< / html>
，一个javascript框架，它向该URL发出GET请求，并以jsonp格式检索数据。然后解析一些关于每个条目的基本信息（标题和链接），并将其附加到ID为 data 的div中的无序列表中，只要数据的位是没有为该条目定义。如果你将它粘贴在一个脚本标记中，并且在页面上加载jQuery并运行它，这将起作用。我不打算详细说明这是如何工作的，因为你说你愿意付出一些努力。但是我会让你从一些链接和基本解释开始。
这个例子利用：
- AJAX ，或Asynchronous Javascript and XML。一组用于创建交互式Web应用程序的技术。在我们的示例中，特别是 XMLHttpRequest ，其中jQuery的
jQuery.ajax是一个包装。jQuery.getJSON是一个包装jQuery.ajax专门用于检索JSON或JSONP编码的数据。 - JSON 或Javascript Object Notation轻量级数据交换的概念格式。您可以将其视为XML的无脂替代品。
- JSONP 或JSON的概念填充。 JSONP不限于与通常的AJAX请求相同的策略。
- jQuery javascript框架，一个用于dom操作和ajax请求的优秀javascript框架，以及几乎所有其他有用的东西。
-
jQuery.getJSON（）方法，用于检索json或jsonp数据，如本例中 -
jQuery.each（）方法，可用于迭代任何泛型集合，在本例中为json。 - <$来自jQuery的c $ c> .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，函数（数据）{
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>）;
}
}）;
}）;
这应该足以让您指向正确的方向。如果您有任何问题，请发表评论，我会尽力回答他们。
I have written a C code for getting the list of youtube videos for the url "*http://gdata.youtube.com/feeds/api/standardfeeds/top_rated*" using the libsoup library. I can parse the returned xml data using libxml2 and extract the desired fields from it.
I want to know how can i do the same using javascript and display the list on a browser. I have very basic knowledge on javascript but i am willing to put in the needed effort if you guys point me in the right direction.
I understand the following from the google help documentation for youtube APIs.
- Send a GET request in desired format to the url mention.
- Response will be xml or json-c format and this has to be parsed
How do i achieve both of these using javascript and display using html/javascript? Sample code or any links will be of great help.
Edit : Adding php tag for better visibility of the question and i think php may be able to provide hints for the question.
TIA,
Praveen S
EDIT after trying the suggestions given below:
How do i debug this? It doesnt seem to display the title of the videos which i intend to enlist.
<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>
Well, I've whipped something basic up using jQuery, a javascript framework, that makes a GET request to that url, and retrieves the data in jsonp format. Then parses some basic info (title and link) about each entry out and appends it to an unordered list within a div with id of data, as long as the bits of data are not undefined for that entry. This works if you stick it in a script tag with jQuery loaded on the page and run it. I'm not going to go into all the details of how this works, because you said you'd be willing to put in some effort. But I'll get you started with some links and basic explanations.
This example utilizes:
- The concept of AJAX, or Asynchronous Javascript and XML. A group of technologies used to create interactive web applications. In our example, specifically XMLHttpRequest, for which jQuery's
jQuery.ajaxis a wrapper.jQuery.getJSONis a wrapper forjQuery.ajaxspecifically intended to retrieve JSON or JSONP-encoded data. - The concept of JSON, or Javascript Object Notation, a lightweight data-interchange format. You can think of it as a fat-free alternative to XML.
- The concept of JSONP, or JSON with padding. JSONP is not limited to the same-origin policy as normal AJAX requests are.
- The jQuery javascript framework, an excellent javascript framework for dom manipulation and ajax requests, and pretty much everything else useful.
- The
jQuery.getJSON()method from jQuery, which is used to retrieve json or jsonp data, such as in this example - The
jQuery.each()method from jQuery, which can be used to iterate over any generic collection, in this case, json. - The
.append()method from jQuery, which is used to append content to dom elements. - The concept of jQuery Selectors, which are really just css selectors with a few extra bells and whistles. jQuery uses selectors to quickly "select" dom elements for operation upon them.
Without further adieu:
The Example
$("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>");
}
});
});
That should be enough to get you "pointed in the right direction." If you have any questions, make a comment and I'll do my best to answer them.
这篇关于如何使用JavaScript获取并显示YouTube视频列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
