文档章节

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

嘻哈开发者
 嘻哈开发者
发布于 2015/01/20 22:11
字数 715
阅读 468
收藏 18

本文将介绍,如何利用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

本文转载自:http://www.cnblogs.com/mqingqing123/p/3789599.html

嘻哈开发者
粉丝 55
博文 119
码字总数 1563
作品 0
广州
程序员
私信 提问
加载中

评论(1)

子弹兄
子弹兄
好文章啊!!
18 个 jQuery Mobile 开发贴士和教程

jQuery Mobile 是 jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。 Hardbo...

红薯
2011/12/11
3.7K
2
8 个优秀的 jQuery Mobile 教程

jQuery Mobile 是 jQuery 在手机上和平板设备上的版本。jQuery Mobile不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。虽然jQuery Mobile相对较新,但开发...

小编辑
2011/07/05
2.7K
6
开源中最好的 Web 开发的资源

学习HTML 5编程和设计 ★ HTML5 Rocks : Major Feature Groups 的学习 HTML5 的资源 (HTML5 演示, 教程 ). 源码 很不错的 HTML5 Dashboard – Mozilla,效果很炫。 WhatWG Developers, 一个清...

红薯
2011/06/09
8.4K
36
jquery的ajax和getJson跨域获取json数据

很多开发人员在使用jquery在前端和服务器端进行数据交互,所以很容易会认为在前端利用jquery就可以读取任何站点的数据了。近日在进行开发时,因为要和第三方公司的一个项目进行数据的共享,因...

度外网络
2012/09/26
14.4K
1
jQuery Mobile 和 Kendo UI 的比较

jQuery Mobile 和 Kendo UI 都是流行的 JavaScript 框架,在开发中我们可以在它们的基础上添砖加瓦制作所有现代移动WEB应用。这两个框架都是基于使用率顶尖的 JavaScript 库 jQuery 所构建的...

oschina
2014/04/24
30K
32

没有更多内容

加载失败,请刷新页面

加载更多

OpenStack 简介和几种安装方式总结

OpenStack :是一个由NASA和Rackspace合作研发并发起的,以Apache许可证授权的自由软件和开放源代码项目。项目目标是提供实施简单、可大规模扩展、丰富、标准统一的云计算管理平台。OpenSta...

小海bug
昨天
7
0
DDD(五)

1、引言 之前学习了解了DDD中实体这一概念,那么接下来需要了解的就是值对象、唯一标识。值对象,值就是数字1、2、3,字符串“1”,“2”,“3”,值时对象的特征,对象是一个事物的具体描述...

MrYuZixian
昨天
6
0
数据库中间件MyCat

什么是MyCat? 查看官网的介绍是这样说的 一个彻底开源的,面向企业应用开发的大数据库集群 支持事务、ACID、可以替代MySQL的加强版数据库 一个可以视为MySQL集群的企业级数据库,用来替代昂贵...

沉浮_
昨天
7
0
解决Mac下VSCode打开zsh乱码

1.乱码问题 iTerm2终端使用Zsh,并且配置Zsh主题,该主题主题需要安装字体来支持箭头效果,在iTerm2中设置这个字体,但是VSCode里这个箭头还是显示乱码。 iTerm2展示如下: VSCode展示如下: 2...

HelloDeveloper
昨天
9
0
常用物流快递单号查询接口种类及对接方法

目前快递查询接口有两种方式可以对接,一是和顺丰、圆通、中通、天天、韵达、德邦这些快递公司一一对接接口,二是和快递鸟这样第三方集成接口一次性对接多家常用快递。第一种耗费时间长,但是...

程序的小猿
昨天
11
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部