前端访问后台获取数据请求一般都会存在CROS同源问题。（即 端口 域名 协议 相同才可以访问）。
一般我们通过本地服务器代理访问，但是这样就会存在上述问题。 所以我们就需要不触发CROS同源问题就需要应用JSONP来处理。
什么是JOSNP呢？
①通过标签具有访问的意义。
②具有herf属性的标签。 （如：a标签、form表单等。）
③具有引用的标签。（script标签、img标签、src标签）
我们首先需要找个api端口 下面我们以天气JOSNP api举例：https://api.asilu.com/weather/?city=广州
一定要抓取的API存在callback返回值
原生JS：
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 <style type="text/css"> 8 * { 9 margin: 0; 10 padding: 0; 11 list-style: none; 12 } 13 14 input { 15 width: 600px; 16 height: 30px; 17 outline: none; 18 display: block; 19 margin: 10px auto; 20 border-radius: 3px; 21 border: 1px solid #ccc; 22 } 23 24 input:focus { 25 color: skyblue; 26 border-color: skyblue; 27 } 28 29 table { 30 width: 600px; 31 margin: 0 auto; 32 line-height: 30px; 33 border-collapse: collapse; 34 } 35 </style> 36 </head> 37 38 <body> 39 <input type="text" placeholder="请输入你要查询的城市" list="search" /> 40 <table border="1"> 41 <thead> 42 <tr> 43 <th>日期</th> 44 <th>温度</th> 45 <th>天气</th> 46 <th>风向</th> 47 </tr> 48 </thead> 49 <tbody> 50 51 </tbody> 52 </table> 53 54 <script type="text/javascript"> 55 //接口https://api.asilu.com/weather/?callback=fn&city=广州 56 var ipt = document.getElementsByTagName("input")[0]; 57 var tbody = document.querySelector("tbody"); 58 //搜索 59 ipt.onkeyup = function(ev) { 60 if(ev.keyCode === 13) { 61 //创建一个标签 62 var script = document.createElement("script"); 63 //设置属性 64 script.src = "http://api.asilu.com/weather/?callback=fn&city" + ipt.value; 65 //插入到body 66 document.body.appendChild(script); 67 //清空 68 document.body.removeChild(script); 69 } 70 } 71 72 function fn(data) { 73 var str = ""; 74 for(var i = 0; i < data.weather.length; i++) { 75 str += "<tr>\ 76 <td>" + data.weather[i].date + "</td>\ 77 <td>" + data.weather[i].temp + "</td>\ 78 <td>" + data.weather[i].weather + "</td>\ 79 <td>" + data.weather[i].wind + "</td>\ 80 </tr>"; 81 } 82 console.log(data); 83 tbody.innerHTML = str; 84 } 85 </script> 86 </body> 87 88 </html>
$Jquery JsonP：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <button>请求</button> 9 10 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> 11 <script type="text/javascript"> 12 $("button").click(function(){ 13 14 //jquery的jsonp 15 $.ajax({ 16 url: "https://www.baidu.com/sugrec?prod=pc&wd=哈哈&cb=fn", 17 dataType: "jsonp", //指定服务器返回的数据类型 18 jsonp: "cb", //默认cb 19 jsonpCallback: "fn",//回调函数的名字 20 success: function(data){ 21 console.log(data) 22 } 23 }); 24 25 26 }) 27 28 29 </script> 30 </body> 31 </html>