Jquery Mobile實例--利用優酷JSON接口讀取視頻數據

本文將介紹，如何利用JqueryMobile調用優酷API JSON接口顯示視頻數據。

（1）註冊用戶接口。

首頁，到 http://open.youku.com 註冊一個帳戶，並經過驗證。而後找到API接口 （http://open.youku.com/docs/tech_doc.html）

能夠看到優酷提供很多API，本文將演示「經過視頻關鍵詞」接口。

 

點擊進去後，會發現client_id和keyword是必填的，所以，將來構造的URL應該相似

https://openapi.youku.com/v2/searches/video/by_keyword.json?client_id=eab6c5f589febec2&keyword=net

若是你的keyword是中文，必須使用encodeURI進行編碼。

 

（2）引用Jquery Mobile

     你能夠到 http://www.jquerymobile.com/ 下載最新版的JM庫，不過本文以JM4.0爲例。在本文的源代碼後面，你能夠看到這些CSS和JS。

 

 

（3）構建頁面

構建頁面的第一步，是在pageinit裏，讀取數據

$(document).on('pageinit', '#home', function () { var url = 'https://openapi.youku.com/v2/searches/video/by_keyword.json?', mode = '&keyword=' + encodeURI('net'), key = '&client_id=eab6c5f589febec2'; $.ajax({ url: url + mode + key, dataType: "json", async: true, success: function (result) { ajax.parseJSONP(result); }, error: function (request, error) { alert('沒法鏈接網絡或者返回值錯誤!'); } }); });

 

接下來，在返回值裏，處理數據，顯示到listview列表裏。

var ajax = { parseJSONP: function (result) { movieInfo.result = result.videos; $.each(result.videos, function (i, row) { console.log(JSON.stringify(row)); $('#movie-list').append('<li><a href="" data-id="' + row.id + '"><img src="' + row.thumbnail + '"/><h3>' + row.title + '</h3><p>click:' + row.view_count + '</p></a></li>'); }); $('#movie-list').listview('refresh'); } } 

 

這裏使用了ID爲moview-list的元素做爲容器，你能夠在HTML裏找到它

<ul data-role="listview" id="movie-list" data-theme="a"> </ul>

另外，代碼中 movieInfo.result = result.videos;中的videos是優酷接口返回的視頻列表。

代碼中的row.thumbnail 是Video提供的屬性，這裏是縮列圖。

 

（4）處理單擊事件

當視頻一條條顯示出來後，在vclick事件裏，更新頁面。請注意，若是使用href會發現失敗，由於JM默認對會href的請求，轉好爲AJAX請求。

$(document).on('vclick', '#movie-list li a', function () { movieInfo.id = $(this).attr('data-id'); $.mobile.changePage("#headline", { transition: "slide", changeHash: false }); });

 

（5）顯示視頻

$(document).on('pagebeforeshow', '#headline', function () { $('#movie-data').empty(); $.each(movieInfo.result, function (i, row) { if (row.id == movieInfo.id) { $('#movie-data').append('<li><a href='+row.link+'><img src="' + row.thumbnail + '"></a></li>'); $('#movie-data').append('<li>名稱: <a href=' + row.link + '>' + row.title + '</a></li>'); $('#movie-data').append('<li>發佈日期:' + row.published + '</li>'); $('#movie-data').append('<li>時長:' + row.duration + '</li>'); $('#movie-data').append('<li>查看次數:' + row.view_count + '</li>'); $('#movie-data').listview('refresh'); } }); });

最後，處理視頻顯示便可。在上面代碼裏，須要注意必定要調用listview的refresh方法刷新listview。

（6）運行結果

  如今運行系統，界面以下，單擊視頻，能夠查看具體的視頻列表。

 

（7）後續步驟

   本文簡單的介紹瞭如何利用Jquery Mobile從後臺調用數據並進行顯示。若是做爲一個真正的應用還有不少事情要作，例如使用localstorage緩存，數據分頁等。
而後，就能夠利用第三方工具如phonegap把HTML轉化爲適合Android/iOS的app了。

 

（8）源代碼

單擊此處下載本文源代碼

http://files.cnblogs.com/mqingqing123/JMDemo.rar