<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#q{
width: 300px;
height: 30px;
padding: 5px;
border: 1px solid #f90;
font-size: 16px;
}
dl{
border-bottom: 1px solid #000;
}
dt{
font-weight: bold;
}
</style>
</head>
<body>
<input type="text" name="" id="q" value="" /><input type="button" name="btn" id="btn" value="搜索" />
<p id="msg"></p>
<hr />
<div id="list"></div>
<script type="text/javascript">
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');
oScript.src = 'http://api.douban.com/book/subjects?q='+oQ.value+'&alt=xd&callback=fn';
document.body.appendChild(oScript);
}
}
function fn(data){
oMsg.innerHTML = data.title.$t + ' : ' + data['opensearch:totalResults'].$t;
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>';
}
oList.innerHTML = html;
}
</script>
</body>
</html>
