使用豆瓣API显示图书列表

你可以使用豆瓣提供的豆瓣秀代码生成器把新收藏自动显在blog上，豆瓣开放了API以后，你还可以根据API自己写一个。下面就是一个简单的示例（效果可以看本站的页尾部分），其中douban.params是请求的参数列表，cat是显示类别，比如书籍book或者电影movie等，start-index是开始的索引，max-results是返回的最大结果，alt是请求返回类型（默认为xml，还可以是json或者xd），apikey是你在豆瓣申请的apikey，最后的callback是回调函数，其他的参数可以看豆瓣API参考手册。因为本例是使用JSONP的方式处理返回的JSON数据，根据豆瓣的规定，这里alt的值应该是xd。parseEntry和render是主要的两个函数，前者分析返回的JSON数据，后者控制数据在页面中的显示。如果你想自己动手写一个玩玩，这是示例也是个不错的开始。

  1. function $(el){ return document.getElementById(el);}
  2. var douban = {
  3.     baseUrl:'http://api.douban.com/people/nkuer/collection',
  4.     params:{
  5.         cat:'book',
  6.         'start-index':1,
  7.         'max-results':50,
  8.         alt:'xd',
  9.         apikey:'*******',
  10.         callback:'douban.appendHTML'
  11.     },
  12.     magicBox:'douban',
  13.     buildUrl:function(){
  14.         var ps = this.params,string='';
  15.         for(var i in ps)
  16.             string += i + '='+ ps[i]+ '&';
  17.         return this.baseUrl+"?"+string;
  18.     },
  19.     appendRequestScript:function(url){
  20.         var head = document.getElementsByTagName("head")[0];
  21.         var script = document.createElement("script");
  22.         script.src = url;
  23.         script.charset = 'utf-8';
  24.         head.appendChild(script);
  25.     },
  26.     appendHTML:function(json){
  27.         $(this.magicBox).innerHTML = this.render(this.parseJSON(json));
  28.     },
  29.     parseJSON:function(json){
  30.         var itemCollection=[];
  31.         for(var i in json.entry)
  32.             itemCollection.push(this.parseEntry(json.entry[i]));
  33.         return itemCollection;
  34.     },
  35.     parseEntry:function(entry){
  36.         var linkItem = {};
  37.         var linkEntry  = entry["db:subject"]["link"];
  38.         linkItem.title = entry["db:subject"]["title"]["$t"];
  39.         linkItem.src = 'http://panweizeng.com/images/douban-no-image.jpg';
  40.         for(var i in linkEntry){
  41.             if(linkEntry[i]['@rel'] == 'image')
  42.                 linkItem.src = linkEntry[i]['@href'];
  43.             if(linkEntry[i]['@rel'] == 'alternate')
  44.                 linkItem.link = linkEntry[i]['@href'];
  45.         }
  46.         return linkItem;
  47.     },
  48.     render:function(itemCollection){
  49.         var html='<table><tr>';
  50.         for(var i in itemCollection){
  51.             html+='<td><a href="'
  52.                 +itemCollection[i].link+'" target="_blank"><img src="'
  53.                 +itemCollection[i].src+'" alt="'
  54.                 +itemCollection[i].title+'" border="0" /></a></td>';
  55.         }
  56.         return html+"</tr></table>";
  57.     },
  58.     init:function(){
  59.         this.appendRequestScript(this.buildUrl());
  60.     }
  61. }
  62. douban.init();

完整示例地址：http://panweizeng.com/others/example/douban_book_list.html

[ 分类: 学习 Learning ] 由 Pan 发表于 January 22, 2008 10:12 am  固定链接 

《使用豆瓣API显示图书列表》 这篇文章一共有2 条评论   我也想说两句

  1. paoe

    January 22, 2008 3:09 pm

    很好!很强大!

  2. 化妆品

    February 19, 2008 2:57 pm

    写的很详细哦！
    可以到乐偶网 http://www.leall.com 发表一下，让更多人知道。

RSS feed for comments on this post. TrackBack URI

相关文章：

发表评论