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