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

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

php javascript html json http

Php 如何使用javascript获取和显示youtube视频列表,php,javascript,html,json,http,Php,Javascript,Html,Json,Http,我编写了一个C代码，用于获取url的youtube视频列表 "*http://gdata.youtube.com/feeds/api/standardfeeds/top_rated*“使用libsoup库。我可以使用libxml2解析返回的xml数据，并从中提取所需的字段我想知道如何使用javascript实现同样的功能，并在浏览器上显示列表。我对javascript有非常基础的知识，但如果你们能给我指出正确的方向，我愿意付出必要的努力我从youtube API的google帮助文档中了解

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

我想知道如何使用javascript实现同样的功能，并在浏览器上显示列表。我对javascript有非常基础的知识，但如果你们能给我指出正确的方向，我愿意付出必要的努力

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

以所需格式向url发送GET请求

响应将是xml或json-c格式，必须对其进行解析

如何使用javascript实现这两个功能，以及如何使用html/javascript显示？示例代码或任何链接都将非常有帮助

编辑：添加php标记以更好地了解问题，我认为php可能能够为问题提供提示

蒂亚

普拉文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>


$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
$（“正文”）。追加（“jffnfjnkj”；
$.getJSON（“http://gdata.youtube.com/feeds/api/standardfeeds/top_rated?callback=function&alt=jsonc&v=2，函数（数据）{
var dataContainer=$（“#data ul”）；
$.each（data.data.items，函数（i，val）{
$（“正文”）。追加（“jffnfjnkj”；
if（typeof（val.player）！='undefined'&&typeof（val.title）！='undefined'）{
dataContainer.append（“”）；
}
});
});
});
});
标题
巴拉圭
段落
点击我

是的，您可以^^

youtube API还提供jsonp，它以JS命令的形式返回数据。
注意（并查看URL中的参数）：

使用jsonp，您没有任何相同的原始策略限制，但它不能与AJAX一起工作

使用jQuery这样的库很容易

如果您不想使用jQuery或类似的东西，您必须将URL作为src属性注入DOM中，并创建一个处理数据的函数（使用上面的URL必须命名为“someFunction”）。

YouTube API支持JSONP（JavaScript对象表示法w/Padding）。JSONP允许您发出外部站点请求以获取数据。但你真的不需要知道这些。基本思想是将一个请求作为src属性注入一个脚本标记

但是现在，除非你想学习核心Javascript，否则你也不需要这么做。这些代码都是在出色的Javascript库中为您编写的。我建议您使用jQuery发出JSONP请求。jQuery是一个简单的库，可以通过向HTML文档添加一行代码来使用

一旦jQuery启动并运行，就可以使用getJSON命令解析JSONP数据。此时，您将获得一个包含所有所需数据的对象，您可以选择如何输出数据。

好吧，我已经使用jQuery（一个javascript框架）创建了一些基本的东西，它向该url发出get请求，并以jsonp格式检索数据。然后解析每个条目的一些基本信息（标题和链接），并将其附加到id为

data

的div中的无序列表中，只要该条目的数据位没有未定义。如果将jQuery加载到页面上并运行它，则可以将其粘贴到脚本标记中。我不打算详细说明这是如何工作的，因为你说过你愿意付出一些努力。但我会让你从一些链接和基本解释开始

此示例利用：

或异步Javascript和XML的概念。用于创建交互式web应用程序的一组技术。在我们的示例中，jQuery是一个包装器。是专门用于检索JSON或JSONP编码数据的包装器

轻量级数据交换格式的概念或Javascript对象表示法。您可以将其视为XML的无脂肪替代品

的概念，或带有填充的JSON。JSONP不限于与普通AJAX请求相同的源策略

这是一个优秀的javascript框架，用于dom操作和ajax请求，以及几乎所有其他有用的东西

jQuery中的方法，用于检索json或jsonp数据，如本例中所示

jQuery中的方法，可用于迭代任何泛型集合，在本例中为json

jQuery中的方法，用于将内容附加到dom元素

的概念，这实际上只是css选择器与一些额外的铃铛和口哨。jQuery使用选择器快速“选择”dom元素以对其进行操作没有进一步的告别：

示例

$（“正文”）。追加（）；
$.getJSON（“http://gdata.youtube.com/feeds/api/standardfeeds/top_rated?callback=?&alt=jsonc&v=2，函数（数据）{
var dataContainer=$（“#data ul”）；
$.each（data.data.items，函数（i，val）{
if（typeof（val.player）！='undefined'&&typeof（val.title）！='undefined'）{
dataContainer.append（“”）；
}
});
});

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

其中一些术语对我来说是新的。如何使用javascript发送请求？如何解析返回的js命令？谢谢回复。回调=应该是什么？代码没有加载任何内容。请检查我的编辑。我想知道我写的代码有什么问题。它应该显示

     $("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>");
        }
        });
    });