Jquery Mobile執行個體--利用優酷JSON介面讀取視頻資料

標籤：android   style   class   blog   code   http   

本文將介紹，如何利用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