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