JS自动加载豆瓣相关图书内容

2014年11月01日编程

为了偷懒，看了两天Javascript，网上又搜索了一下jquery，想着改写下博客模板，使得罗列读的图书时可以少写些内容，能根据ID自动添加豆瓣上的其他的相关内容。PS.这是改版前的内容，用于老博客的前端页面

下面总结一下:

首先用到了豆瓣API，另外推荐百度的API Store，上面可以查找各个公司的提供的API接口。

其次在book.html模板里面对要添加的地方div标签增加类book属性，并取markdown中subject、image、description、status的值来设为属性。如下：

<div class="col-md-12 book" subject="25902102" image="/public/img/s27299192.jpg" description="" status="在读">
</div>

下面把book.js代码贴上

$(document).ready(function(){
    var url = 'https://api.douban.com/v2/book/'//API地址
    $(".book").each(//对html页面中class是book的每个标签执行以下操作
        function(){
       var subject=$(this).attr("subject");//取得subjec属性
       var image=$(this).attr("image");
       var description=$(this).attr("description");
       var status=$(this).attr("status");
       var ob=$(this);//获取这个对象
       //alert(subject);
        var hml1='<div class="panel panel-primary">'
            +'<div class="panel-heading">';
        var hml2='</div>'
            +'<div class="panel-body">'
              +'<div class="row">'
               +'<div class="col-md-4 col-xs-12 center">'
                 +'<img src="';
        var hml3='" alt="cover" class="img-thumbnail">'
                +'</div>'
                +'<div class="col-md-8 col-xs-12">'
                  +'<table class="table table-bordered">'
                    +'<tbody>'
                      +'<tr><td style="width:80px;">作者</td><td>';
        var hml4='</td></tr>'
                      +'<tr><td>出版社</td><td>';

        var hml5='</td></tr>'
                     +'<tr><td>出版年</td><td>';
        var hml6='</td></tr>'
                      +'<tr><td>ISBN</td><td>';
        var hml7='</td></tr>'
                      +'<tr><td>链接</td><td><a href="';
        var hml8='" title="';
        var hml9='">图书链接</a></td></tr>'
        
        if(status=="已读")//判断状态
          hml9=hml9+'<tr><td>状态</td><td>'
                    +'<span class="label label-success">已读';
        else if(status=="在读")
          hml9=hml9+'<tr><td>状态</td><td>'
                      +'<span class="label label-info">在读';
        else if(status=='未读')
          hml9=hml9+'<tr><td>状态</td><td>'
                      +'<span class="label label-default">未读';
        hml9 =hml9+'</span></td></tr>'
                      +'<tr><td>豆瓣评分</td><td>';

        var hml10='</td></tr><tr><td>评论</td><td>';
        var hml11='</td></tr>'
        +'</tbody>'
                  +'</table>'
                +'</div>'
              +'</div>'
           +'</div>'
          +'</div> ';
        $.getJSON(url+subject+"?callback=?", function(data) {//获取豆瓣数据并拼接html代码
          ob.append(hml1+data.title+hml2+image+hml3+data.author+hml4+data.publisher+hml5+data.pubdate+hml6+data.isbn13+hml7+data.alt+hml8+data.alt+hml9+data.rating.average+hml10+description+hml11);
        });
    } );
})

通过上面代码列读书清单markdown时，只需要添加豆瓣subject、本地图书封面地址和自己的评价与读书状态就可以了，比原来方便些。

下面就是处理js代码的引用。一开始使用<script src="/public/js/book.js"></script>放在了footer.html里面发现不行，只有首次打开能够加载，再点击按钮时，由于ajax的作用，js代码不重新加载执行。后来放到book.html里，仍然是这个问题。最后没办法，直接把代码加到book.html的后面，不引用src了，结果居然好了。目前还有一个问题没解决，就是豆瓣限制api的访问次数，调试过程中访问多了都是403禁止访问，这个真不知道怎么改了，哎！

因为是初学，中间遇到各种奇葩问题，不一一列举。

发现写着好简单，做着好难、、、

@

JS自动加载豆瓣相关图书内容