一直在豆瓣上收藏看过的书和电影（其他功能基本没用过），准备做个页面可以同步显示豆瓣上收藏的所有图书和电影，这个功能可以通过豆瓣提供的API来实现，并不复杂，我只是做了简单的封装，需要的可以直接拿去用，有问题可以直接留言，运行后的效果看这里 Books 或这里 我的豆瓣 ，因为豆瓣限制一分钟内访问次数不能超过40次，所以如果多人同时访问前面的链接可能看不到效果，再传个截图上来:
几点说明：
1.登录豆瓣后，可以去 这里 申请豆瓣APIKey。（不使用API Key时每分钟请求不能超过10次；使用API Key时，对访问的限制较为宽松，为每分钟40次）
2.豆瓣API每次调用 最多返回50个结果 ，如果你豆瓣上的书和电影超过50个，就要多次发起调用，这部分功能我的程序里已经自动处理了。
3.我封装的这段脚本提供了一些可选配置如下，参数的含义都比较明确，这里就不解释了（place是一个div的ID,可以用来做定位）。
defaults:{
place:
"douban"
,
user:
""
,
api:
""
,
book:[{stus:
"reading"
,maxnum:20},{stus:
"read"
,maxnum:500},{stus:
"wish"
,maxnum:100}],
movie:[{stus:
"watched"
,maxnum:500},{stus:
"wish"
,maxnum:200}],
bookreadingtitle:
"正读..."
,
bookreadtitle:
"读过..."
,
bookwishtitle:
"想读..."
,
moviewatchedtitle:
"看过..."
,
moviewishtitle:
"想看..."
}
|
4.在你的网页里参考下面代码增加引用和调用，就可以实现类似这个页面的效果。
<html xmlns=
"http://www.w3.org/1999/xhtml"
>
<head>
<meta http-equiv=
"Content-Type"
content=
"text/html; charset=utf-8"
/>
<title>豆瓣列表</title>
<style type=
"text/css"
>
.douban-title {
padding: 10px 10px 0px 0px;
text-shadow: 0 1px 0 white,1px 2px 2px
#AAA;
font-weight: bold;
font-size:24px;
}
.douban-list a {
padding: 10px 10px 10px 0px;
}
</style>
<script type=
'text/javascript'
src=
'jquery-1.4.2.js'
></script>
<script type=
"text/javascript"
src=
"dbapi_beta1_20120316.js"
></script>
</head>
<body>
<script>
var
_defaults = {
user:
"justin79"
,
//这里换成你的豆瓣ID
api:
""
//这里换成你的豆瓣APIKEY
}
dbapi.show(_defaults);
</script>
</body>
</html>
|
整个javascript代码如下：
//批量读取豆瓣的图书和电影
//by justin 20120316
//http://fejustin.com
//--dbapi.begin--
var
$ = jQuery;
var
dbapi = {
appendScript:
function
(url){
if
((url)&&(url.length > 0))
$(
"<script/>"
).attr(
"src"
,url).attr(
"charset"
,
"utf-8"
).appendTo($(
"head"
)[0]);
},
/**
* 解析json数据为数组
*/
parseJSON:
function
(json){
var
items=[];
$.each(json.entry,
function
(i,item){
var
link = {};
link.title = item[
"db:subject"
][
"title"
][
"$t"
];
link.link = item[
"db:subject"
][
"link"
][1][
"@href"
];
//硬编码
link.src = item[
"db:subject"
][
"link"
][2][
"@href"
];
//硬编码
items.push(link);
});
return
items;
},
render:
function
(items){
var
html=
''
;
$.each(items,
function
(i,item){
html+=
'<a href="'
+item.link+
'" target="_blank"><img src="'
+item.src+
'" alt="'
+item.title
+
'" title="'
+item.title+
'"border="0" /></a>'
;
});
return
html;
},
/**
* todo: bookurl 和 movieurl 可以合并简化
*/
bookurl:
function
(stus,begin,end){
return
this
.allurl(
"book"
,stus,begin,end);
},
movieurl:
function
(stus,begin,end){
return
this
.allurl(
"movie"
,stus,begin,end);
},
allurl:
function
(typ,stus,begin,end) {
if
(end ===0)
return
;
if
(!dbapi[typ + stus +
"_SHOW"
]){
dbapi[typ + stus +
"_SHOW"
] =
function
(json) {
var
mainplace = $(
"#"
+
this
.opts.place);
if
(mainplace.length ===0){
mainplace = $(
"<div/>"
).attr(
"id"
,
this
.opts.place).prependTo($(
"body"
));
}
if
($(
"#"
+typ+stus).length === 0){
var
title =
this
.defaults[typ+stus+
"title"
]?
this
.defaults[typ+stus+
"title"
]:
">>>"
+typ.toUpperCase() +
"-"
+stus.toUpperCase()+
">>>"
;
$(
"<span/>"
).addClass(
"douban-title"
).text(title).appendTo(mainplace);
$(
"<div/>"
).attr(
"id"
,typ+stus).addClass(
"douban-list"
).appendTo(mainplace);
}
$(
"#"
+typ+stus).append(
this
.render(
this
.parseJSON(json)));
}
}
return
this
.apiurl(typ,
this
.opts.user,
this
.opts.api,stus,begin,end);
},
apiurl:
function
(typ,user,key,stus,begin,end){
var
url =
"http://api.douban.com/people/"
+user+
"/collection?cat="
+typ+
"&start-index="
+
begin+
"&max-results="
+end+
"&status="
+stus+
"&alt=xd&callback=dbapi."
+typ+stus+
"_SHOW"
;
if
(key.length > 0)
url +=
"&apikey="
+key;
return
url;
},
/**
* 将num按50分段生成数组集合
* @param {[type]} num 显示项目的个数
* @return {[type]} 按50分段的数组
*/
fixNum:
function
(num){
var
len = num;
var
index = 1;
var
fixnums=[];
if
(50>len> 0){
fixnums.push({begin:index,end:len})
}
else
{
while
(len > 0) {
fixnums.push({begin:index,end:index+49})
len -= 50;
index +=50;
};
}
return
fixnums;
},
/**
* 根据配置项显示豆瓣的图书和电影
* @param {[Object]} options [可选配置项]
*/
show:
function
(options){
this
.opts = $.extend({},
this
.defaults, options);
var
books = [];
var
movies = [];
$.each(
this
.opts.book,
function
(i,item) {
books.push({stus:item.stus,indexs:dbapi.fixNum(item.maxnum)});
});
$.each(
this
.opts.movie,
function
(i,item) {
movies.push({stus:item.stus,indexs:dbapi.fixNum(item.maxnum)});
});
$.each(books,
function
(i,item){
$.each(item.indexs,
function
(t,idx){
setTimeout(dbapi.appendScript(dbapi.bookurl(item.stus,idx.begin,idx.end)),300);
});
});
$.each(movies,
function
(i,item){
$.each(item.indexs,
function
(t,idx){
setTimeout(dbapi.appendScript(dbapi.movieurl(item.stus,idx.begin,idx.end)),1000);
});
});
},
/**
* 可选配置项
* @type {Object}
* todo:可以进一步把book和movie合并到一起，通过类型区分。
*/
defaults:{
place:
"douban"
,
user:
""
,
api:
""
,
book:[{stus:
"reading"
,maxnum:20},{stus:
"read"
,maxnum:500},{stus:
"wish"
,maxnum:100}],
movie:[{stus:
"watched"
,maxnum:500},{stus:
"wish"
,maxnum:200}],
bookreadingtitle:
"正读..."
,
bookreadtitle:
"读过..."
,
bookwishtitle:
"想读..."
,
moviewatchedtitle:
"看过..."
,
moviewishtitle:
"想看..."
}
}
//--dbapi.end--
|
完整的实例下载：http://files.cnblogs.com/justinw/doubanAPI_Demo.rar
本文地址：http://www.cnblogs.com/justinw/archive/2012/03/16/doubanapi.html
本文转自Justin博客园博客，原文链接：http://www.cnblogs.com/justinw/archive/2012/03/16/doubanapi.html，如需转载请自行联系原作者
