首页 > 代码库 > Jquery Mobile实例--利用优酷JSON接口读取视频数据

Jquery Mobile实例--利用优酷JSON接口读取视频数据

2024-07-08 07:41:18   222人阅读

本文将介绍，如何利用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="http://www.mamicode.com/‘ + 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=http://www.mamicode.com/‘+row.link+‘>);                        $(‘#movie-data‘).append(‘<li>名称: <a href=http://www.mamicode.com/‘ + row.link + ‘>‘ + row.title + ‘‘);                        $(‘#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

 


联系
我们