JSONP跨域豆瓣书籍列表 

<!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>

　　

posted @ 2018-01-22 15:32  carol72  阅读(205)  评论(0)    收藏  举报