豆瓣获取图书的例子jsonp

 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#q {width: 300px; height: 30px; padding: 5px; border:1px solid #f90; font-size: 16px;}
dl {border-bottom: 1px dotted #000;}
dt {font-weight: bold;}
</style>
<script>
function fn1(data) {

    var oMsg = document.getElementById('msg');
    var oList = document.getElementById('list');
    
    console.log(data);  //获取到的jsonp信息的显示
    
    oMsg.innerHTML = data.title.$t + ' : ' + data['opensearch:totalResults'].$t;  
//根据获取的信息在html里显示出来，标题和总共的图书数量。因为第二条有特殊符号，所以用[]表示
    
    var aEntry = data.entry;  //图书每一本的信息
    var html = '';
    for (var i=0; i<aEntry.length; i++) { //遍历每一本书
        
        html += '<dl><dt>'+ aEntry[i].title.$t +'</dt><dd><img src="'+ aEntry[i].link[2]['@href'] +'" /></dd></dl>';
        //html显示书的名称，书的图片
    }
    
    oList.innerHTML = html; //将书本的信息写在html中
    
}
window.onload = function() {
    
    var oQ = document.getElementById('q');
    var oBtn = document.getElementById('btn');
    var oMsg = document.getElementById('msg');
    var oList = document.getElementById('list');
    
    oBtn.onclick = function() {  //点击搜索按钮

        if ( oQ.value != '' ) {  //如果搜索的内容不为空
            var oScript = document.createElement('script');  //动态创建script标签
            oScript.src = 'http://api.douban.com/book/subjects?q='+oQ.value+'&alt=xd&callback=fn1';  //设置标签的地址，q为搜索的内容，callback为返回函数名
            document.body.appendChild(oScript);  //将标签添加到文档中
        }
        
        //http://api.douban.com/book/subjects?q='+oQ.value+'&alt=xd&callback=fn1&start-index=(当前页*每页显示的条数)&max-results=10(每页显示的条数)
        
    }
    
}
</script>
</head>

<body>
    http://www.douban.com/service/apidoc/reference/     //接口地址
    <input type="text" id="q" /><input type="button" id="btn" value="搜索" />
    <p id="msg"></p>
    <hr />
    <div id="list"></div>
</body>
</html>

 

posted @ 2017-04-24 13:03  念念念不忘  阅读(382)  评论(0)    收藏  举报