1 <!DOCTYPE html> 2 <html> 3 ????<head> 4 ????????<meta charset="UTF-8"> 5 ????????<title>jsonp跨域</title> 6 ????????<style> ?????????????????7 ????????????.center{ 8 ????????????????width: 60%; 9 ????????????????height:40vh;10 ????????????????margin: auto;11 ????????????}12 ????????????img{ ???13 ????????????display: block; 14 ????????????width:400px;15 ????????????height: 200px;16 ????????????margin-left: 16%;17 ????????????}18 ????????????.input{19 ????????????????margin: auto;20 ????????????????width: inherit;21 ????????????????height: auto;22 ????????????}23 ????????????.search{24 ????????????????margin-left: 11.8%;25 ????????????????position: absolute;26 ????????????????border: 1px solid #eee;27 ????????????????width: 349px;28 ????????????????height: auto;29 ????????????????display: none;30 ????????????}31 ????????????ul{32 ????????????????padding-left: 0;33 ????????????????list-style: none;34 ????????????}35 ????????????#text{36 ????????????????height: 25px;37 ????????????????width: 270px;38 ????????????}39 ????????????a{40 ????????????????text-decoration: none;41 ????????????????color: #000;42 ????????????}43 ????????????button{44 ????????????????position: relative;45 ????????????????display: inline-block;46 ????????????????height: 31px;47 ????????????????line-height:25px;48 ????????????}49 ????????</style>50 ????</head>51 ????<body>52 ????????<div class="center">53 ????????????<img src="img/1.png" />54 ????????????<div class="input">55 ????????????????<input type="text" id="text" />56 ????????????????<button id="btn">搜索一下</button>57 ????????????</div>58 ????????????<div class="search">59 ????????????????<ul></ul>60 ????????????</div>61 ????????</div> ????????62 ????</body>63 ????<script>64 ????????var otext=document.getElementById("text");65 ????????var osea=document.getElementsByClassName("search")[0];66 ????????var oul=document.getElementsByTagName("ul")[0];67 ????????otext.onkeyup=function(){68 ????????????var val=otext.value;69 ????????????osea.style.display=val?"block":"none";70 ????????????var os=document.createElement("script");71 ????????????os.src="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+val+"&cb=laji&_=1502957262912";72 ????????????document.body.appendChild(os);73 ????????}74 ?????????function laji(json){75 ?????????????oul.innerHTML=‘‘;76 ?????????????json.s.forEach(function(data){77 ?????????????????var oli=document.createElement("li");78 ?????????????????oli.innerHTML="<a href=‘https://sp0.baidu.com/s?wd="+data+"‘>"+data+"</a>";79 ?????????????????oul.appendChild(oli);80 ?????????????});81 ?????????}82 ????</script>83 ????<script src="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=%E5%9E%83%E5%9C%BE&cb=laji&_=1502957262912"></script>84 </html>jquery版本：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<meta name="viewport" content="width=device-width, initial-scale=1.0"> ???<meta http-equiv="X-UA-Compatible" content="ie=edge"> ???<title>Document</title> ???<style> ???????</style></head><body> ???<div class="aa"></div> ???<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> ???<script> ???????function getInfo(data){ ???????????console.log(data) ???????} ???????$.ajax({ ???????????type: "get", ???????????dataType: "jsonp", ???????????jsonpCallback: "getInfo", ???????????url: "https://api.github.com/users/gaoxuerong", ???????????success: function(data){ ???????????????console.log(‘success‘) ???????????}, ???????????error: function(error){ ???????????????console.log(error) ???????????} ???????}) ???</script></body></html>jsonp
原文地址：https://www.cnblogs.com/gaoxuerong123/p/9612487.html