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

2019-05-26 19:18:16 阅读：203 来源： 互联网

我已经编写了一个C代码,用于获取网址的YouTube视频列表
“* http：//gdata.youtube.com/feeds/api/standardfeeds/top_rated*”使用libsoup库.
我可以使用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>

解决方法:

好吧,我已经使用jQuery(一个javascript框架)制作了一些基本的东西,它向该URL发出GET请求,并以jsonp格式检索数据.然后解析有关每个条目的一些基本信息(标题和链接),并将其附加到具有数据id的div中的无序列表,只要该条目的数据位未定义.如果您将其粘贴在页面上加载jQuery并运行它的脚本标记中,则此方法有效.我不会详细介绍它是如何工作的,因为你说你愿意付出一些努力.但我会从一些链接和基本解释开始.

此示例使用：

> AJAX的概念,或异步Javascript和XML.一组用于创建交互式Web应用程序的技术.在我们的示例中,特别是XMLHttpRequest,jQuery的jQuery.ajax是一个包装器. jQuery.getJSON是jQuery.ajax的包装器,专门用于检索JSON或JSONP编码的数据.
> JSON的概念,或Javascript Object Notation,一种轻量级数据交换格式.您可以将其视为XML的无脂替代品.
> JSONP的概念,或带填充的JSON. JSONP不限于与普通AJAX请求相同的原始策略.
> jQuery javascript framework,一个用于dom操作和ajax请求的优秀javascript框架,以及几乎所有其他有用的东西.
>来自jQuery的jQuery.getJSON()方法,用于检索json或jsonp数据,例如在本例中
>来自jQuery的jQuery.each()方法,可用于迭代任何泛型集合,在本例中为json.
> 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>");
        }
        });
    });

这应该足以让你“指向正确的方向”.如果您有任何问题,请发表评论,我会尽力回答.

标签：json,php,javascript,http,html
来源： https://codeday.me/bug/20190526/1157609.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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