小编典典

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

json

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

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

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

将所需格式的GET请求发送到网址提及。
响应将为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>

阅读 302

2020-07-27

共1个答案

小编典典

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

此示例利用：

AJAX或异步Java语言和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()jQuery中的方法，用于检索json或jsonp数据，例如本示例
jQuery.each()jQuery 的方法，可用于遍历任何通用集合（在本例中为json）。
.append()jQuery 的方法，用于将内容附加到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>");
        }
        });
    });

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

2020-07-27