我已經編寫了一個用於獲取url的YouTube視頻列表的C代碼「* http：//gdata.youtube.com/feeds/api/standardfeeds/ top_rated *「使用libsoup庫。我可以使用libxml2解析返回的xml數據，並從中提取所需的字段。如何使用javascript獲取並顯示youtube視頻列表

我想知道如何使用JavaScript來做同樣的事情，並在瀏覽器上顯示列表。我對JavaScript有非常基本的知識，但如果你們指出我正確的方向，我願意付出所需的努力。

我從YouTube幫助文檔瞭解以下有關youtube API的信息。

以所需的格式發送GET請求到URL提及。
響應將是XML或JSON-C畫幅，這已被解析

我如何實現這兩種使用JavaScript和顯示使用HTML/JavaScript的呢？示例代碼或任何鏈接都會有很大的幫助。

編輯：添加php標籤爲更好的可見性的問題，我認爲PHP可能能夠提供問題的提示。

TIA，

普利文在試着建議後

編輯如下：

如何調試呢？它似乎並不顯示我打算登記的視頻的標題。

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

來源

2010-11-18 Praveen S

嗯，我使用jQuery，一個JavaScript框架，使一個GET請求，該網址掀起一些基本的東西了，JSONP格式檢索數據。然後解析一些關於每個條目的基本信息（標題和鏈接），並將其附加到ID爲data的div中的無序列表中，只要該條目的數據位不是未定義的即可。如果你將它粘貼在一個腳本標記中，並且在頁面上加載jQuery並運行它，這將起作用。我不打算詳細說明這是如何工作的，因爲你說你願意付出一些努力。但是我會讓你從一些鏈接和基本解釋開始。

該實施例利用了：

的AJAX概念，或異步JavaScript和XML。一組用於創建交互式Web應用程序的技術。在我們的示例中，特別是XMLHttpRequest，其中jQuery的jQuery.ajax是一個包裝。 jQuery.getJSON是專門用於檢索JSON或JSONP編碼數據的jQuery.ajax的包裝。
JSON的概念，或Javascript對象表示法，輕量級數據交換格式。您可以將其視爲XML的無脂替代品。
JSONP或帶填充符的JSON的概念。 JSONP不限於與通常的AJAX請求相同的策略。
jQuery javascript framework，一個優秀的JavaScript框架，用於dom操作和ajax請求，以及幾乎所有其他有用的東西。
從jQuery的，這是用於檢索JSON或JSONP數據，如在此實例中
從jQuery的該jQuery.each()方法，其可以被用於迭代任何通用集合，在這種情況下，JSON的jQuery.getJSON()方法。
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>"); 
     } 
     }); 
    });

這應該是足以讓你「指出了正確的方向。」如果您有任何問題，請發表評論，我會盡力回答他們。

來源

2010-11-18 06:59:46 Alex

感謝您的回覆。回調應該是什麼？該代碼不會加載任何內容。請檢查我的編輯。 – 2010-11-28 15:08:36

我想知道我寫的代碼有什麼問題。它至少應該顯示極簡主義的東西。 – 2010-11-28 15:12:22

是的，可以^^

在YouTube-API還提供JSONP，它返回數據作爲JS-命令。
關注此（並查看URL裏面的參數）：
http://gdata.youtube.com/feeds/api/standardfeeds/top_rated?alt=json&callback=someFunction

隨着JSONP你沒有任何sameOriginPolicies的限制，雖然它不是Ajax的工作原理。

使用像jQuery這樣的庫很容易。

如果你不想使用jQuery或類似的東西，你必須注入一個<script>-element元素作爲src-attribute的URL，並創建一個函數（使用上面的URL必須命名「someFunction」）與數據一起工作。

來源

2010-11-18 06:38:36

其中一些術語對我來說是新的。我如何使用JavaScript發送請求？我如何解析返回的js命令？ – 2010-11-18 06:42:52

YouTube API支持JSONP（帶有填充的JavaScript對象表示法）。 JSONP允許您提出外部站點請求以獲取數據。但你並不需要知道這一切。基本的想法是你注入一個帶有請求的腳本標籤作爲src屬性。

但是現在，你並不需要這麼做，除非你想學習硬核的Javascript。該代碼全部爲您精彩的JavaScript庫編寫。我建議你使用jQuery來製作JSONP請求。 jQuery是一個簡單的庫，可以通過向HTML文檔添加一行代碼來使用它。

一旦你jQuery的建立和運行，你可以使用的getJSON命令解析JSONP數據。此時，您將獲得一個包含所需數據的對象，並且您可以選擇要如何輸出數據。

來源

2010-11-18 06:46:01 Kranu

如何使用javascript獲取並顯示youtube視頻列表

回答

的實例

相關問題