小编典典

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

json

我编写了一个C代码,用于使用libsoup库获取url为“ * http://gdata.youtube.com/feeds/api/standardfeeds/top_rated*”的youtube视频列表。我可以使用libxml2解析返回的xml数据,并从中提取所需的字段。

我想知道如何使用javascript并在浏览器中显示列表。我对javascript有非常基本的了解,但是如果你们指出正确的方向,我愿意付出必要的努力。

我从youtube API的Google帮助文档中了解以下内容。

  1. 将所需格式的GET请求发送到网址提及。
  2. 响应将为xml或json-c格式,必须对此进行解析

我如何使用javascript来实现这两者并使用html / javascript来显示?示例代码或任何链接将有很大的帮助。

编辑:添加php标签以更好地了解问题,我认为php可能能够提供有关问题的提示。

TIA,

Praveen S

尝试以下建议后进行编辑:

我该如何调试?它似乎没有显示我打算征集的视频的标题。

<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>

阅读 50

收藏
2020-07-27

共1个答案

小编典典

好吧,我已经使用jQuery(一种JavaScript框架)对一些基本知识进行了整理,该jQuery向该URL发出GET请求,并以jsonp格式检索数据。然后解析关于每个条目的一些基本信息(标题和链接),并将其附加到id为的div中的无序列表中data,只要该条目的数据位未定义。如果将其粘贴在页面上加载了jQuery的脚本标签中并运行它,则此方法有效。我将不讨论其工作原理的所有细节,因为您说过您愿意付出一些努力。但是,我将为您提供一些链接和基本说明。

此示例利用:

  1. AJAX或异步Java语言和XML 的概念。一组用于创建交互式Web应用程序的技术。在我们的示例中,特别是XMLHttpRequest,jQuery jQuery.ajax是其包装器。jQuery.getJSONjQuery.ajax专门用于检索JSON或JSONP编码数据的包装器。
  2. 的概念JSON或JavaScript Object Notation是一种轻量级的数据交换格式。您可以将其视为XML的替代品。
  3. JSONP或带填充的JSON 的概念。JSONP不限于与普通AJAX请求相同的来源策略。
  4. jQuery的JavaScript框架,对DOM操作和Ajax请求,并且几乎一切有用的一个很好的JavaScript框架。
  5. jQuery.getJSON()jQuery中的方法,用于检索json或jsonp数据,例如本示例
  6. jQuery.each()jQuery 的方法,可用于遍历任何通用集合(在本例中为json)。
  7. .append()jQuery 的方法,用于将内容附加到dom元素。
  8. 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>");
        }
        });
    });

这应该足以使您“指向正确的方向”。如有任何疑问,请发表评论,我会尽力回答。

2020-07-27