JSONP实例

来源：互联网发布：淘宝卖家设置流量包编辑：程序博客网时间：2024/04/20 03:48

JSONP实例1：百度搜索下拉提示

百度搜索接口注意cb为调用函数的名字（可以通过百度搜索中审查元素-network中查看）

'http://suggestion.baidu.com/su?wd='+this.value+'&cb=maiov

<!DOCTYPEHTML>

<html>

<head>

<metahttp-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;}

#ul1 {border:1pxsolid #f90; width: 310px; margin: 0;padding: 0; display: none;}

li a {line-height: 30px; padding: 5px; text-decoration: none; color: black; display:block;}

li a:hover{background: #f90; color: white; }

</style>

functionmaiov(data) {

var oUl = document.getElementById('ul1');

var html = '';

if (data.s.length) {

oUl.style.display = 'block';

for (var i=0; i<data.s.length;i++) {

html += '<li><atarget="_blank"href="http://www.baidu.com/s?wd='+data.s[i]+'">'+ data.s[i]+'</a></li>';

}

oUl.innerHTML = html;

} else {

oUl.style.display = 'none';

}

window.onload =function() {

var oQ = document.getElementById('q');

var oUl = document.getElementById('ul1');

oQ.onkeyup = function() {

if ( this.value != '' ) {

var oScript =document.createElement('script');

oScript.src = 'http://suggestion.baidu.com/su?wd='+this.value+'&cb=maiov';

document.body.appendChild(oScript);

} else {

oUl.style.display = 'none';

}

</script>

</head>

<body>

</body>

</html>

实例2：豆瓣搜索图书功能

豆瓣开发者地址：

https://developers.douban.com/wiki/?title=book_v2#get_book_search

<!DOCTYPEhtml>

<htmllang="en">

<head>

<style>

#search {width:300px; height: 30px; padding: 5px; border:1px solid #f90; font-size: 16px;}

dl {border-bottom:1px dotted #000;}

dt {font-weight:bold;}

</style>

function fn(data){

varoTotal=document.getElementById('total');

var oList=document.getElementById('list');

oTotal.innerHTML="一共搜索到"+data.total+"条消息";

varhtml="";

varlen=data.books.length;

for(vari=0;i<len;i++)

{

html+='<dl><dt>'+data.books[i].title+'</dt><dd><imgsrc="'+data.books[i].image+'"</dd><dd>'+data.books[i].summary+'</dd></dl>'

}

oList.innerHTML=html;

}

window.onload=function(){

varoSearch=document.getElementById('search');

varoBtn=document.getElementById('btn');

oBtn.onclick=function(){

if(oSearch.value!='')

{

varoScript=document.createElement('script');

oScript.src="https://api.douban.com/v2/book/search?q="+oSearch.value+"&callback=fn";