使用豆瓣API顯示圖書列表

楊竹青

你可以使用豆瓣提供的豆瓣秀代碼生成器把新收藏自動顯在blog上，豆瓣開放了API以后，你還可以根據(jù)API自己寫一個。下面就是一個簡單的示例（效果可以看本站的頁尾部分），其中douban.params是請求的參數(shù)列表，cat是顯示類別，比如書籍book或者電影movie等，start-index是開始的索引，max-results是返回的最大結(jié)果，alt是請求返回類型（默認為xml，還可以是json或者xd），apikey是你在豆瓣申請的apikey，最后的callback是回調(diào)函數(shù)，其他的參數(shù)可以看豆瓣API參考手冊。因為本例是使用JSONP的方式處理返回的JSON數(shù)據(jù)，根據(jù)豆瓣的規(guī)定，這里alt的值應該是xd。parseEntry和render是主要的兩個函數(shù)，前者分析返回的JSON數(shù)據(jù)，后者控制數(shù)據(jù)在頁面中的顯示。如果你想自己動手寫一個玩玩，這是示例也是個不錯的開始。


function $(el){ return document.getElementById(el);}
var douban = {
    baseUrl:'http://api.douban.com/people/nkuer/collection',
    params:{
        cat:'book',
        'start-index':1,
        'max-results':50,
        alt:'xd',
        apikey:'*******',
        callback:'douban.appendHTML'
    },
    magicBox:'douban',
    buildUrl:function(){
        var ps = this.params,string='';
        for(var i in ps)
            string += i + '='+ ps[i]+ '&';
        return this.baseUrl+"?"+string;
    },
    appendRequestScript:function(url){
        var head = document.getElementsByTagName("head")[0];
        var script = document.createElement("script");
        script.src = url;
        script.charset = 'utf-8';
        head.appendChild(script);
    },
    appendHTML:function(json){
        $(this.magicBox).innerHTML = this.render(this.parseJSON(json));
    },
    parseJSON:function(json){
        var itemCollection=[];
        for(var i in json.entry)
            itemCollection.push(this.parseEntry(json.entry[i]));
        return itemCollection;
    },
    parseEntry:function(entry){
        var linkItem = {};
        var linkEntry  = entry["db:subject"]["link"];
        linkItem.title = entry["db:subject"]["title"]["$t"];
        linkItem.src = 'http://panweizeng.com/images/douban-no-image.jpg';
        for(var i in linkEntry){
            if(linkEntry[i]['@rel'] == 'image')
                linkItem.src = linkEntry[i]['@href'];
            if(linkEntry[i]['@rel'] == 'alternate')
                linkItem.link = linkEntry[i]['@href'];
        }
        return linkItem;
    },
    render:function(itemCollection){
        var html='<table><tr>';
        for(var i in itemCollection){
            html+='<td><a href="'
                +itemCollection[i].link+'" target="_blank"><img src="'
                +itemCollection[i].src+'" alt="'
                +itemCollection[i].title+'" border="0" /></a></td>';
        }
        return html+"</tr></table>";
    },
    init:function(){
        this.appendRequestScript(this.buildUrl());
    }
}
douban.init();