gpt4 book ai didi

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

转载 作者:可可西里 更新时间:2023-10-31 22:16:05 26 4
gpt4 key购买 nike

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

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

我从 YouTube API 的谷歌帮助文档中了解到以下内容。

  1. 以所需格式向 url mention 发送 GET 请求。
  2. 响应将是 xml 或 json-c 格式,并且必须对其进行解析

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

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

TIA,

普瑞文 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 格式检索数据。然后解析关于每个条目的一些基本信息(标题和链接)并将其附加到一个 div 中的无序列表,其中 id 为 data,只要该条目的数据位不是未定义的。如果您将它粘贴在页面上加载了 jQuery 的脚本标记中并运行它,这将起作用。我不打算详细介绍它是如何工作的,因为你说过你愿意付出一些努力。但我会通过一些链接和基本解释帮助您入门。

这个例子利用了:

  1. 概念AJAX ,或异步 Javascript 和 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 framework ,一个优秀的 javascript 框架,用于 dom 操作和 ajax 请求,以及几乎所有其他有用的东西。
  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>");
}
});
});

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

关于php - 如何使用 javascript 获取和显示 youtube 视频列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4212105/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com