一直在豆瓣上收藏看過的書和電影（其他功能基本沒用過），准備做個頁面可以同步顯示豆瓣上收藏的所有圖書和電影，這個功能可以通過豆瓣提供的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