AJAX 跨域呼叫 快遞查詢API介面
阿新 • • 發佈：2019-01-01
javascript預設是允許跨域操作的，比如a.com下不能操作b.com下的DOM，ajax也一樣。但是javascript卻允許從a.com從b.com引用js檔案，JSONP正式跟據這個原理實現了跨域操作。下面這個例子是採用jQuery框架的getJSON方法，注意必須新增callback=?引數，其中的“？”系統會自動替換。<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>JSONP呼叫愛查快遞API</title> <script language="javascript" src="js/jquery.js"></script> <script language="javascript"> var _url='http://api.ickd.cn/?com=shentong&nu=468299202580&id=568AC6659ED39224A0E687698018D747&encode=utf8&type=json&callback=?'; function jsonp(){ $.getJSON(_url,function(json){ if(json.status && json.data){ var html='<table><tr><th>時間</th><th>進度</th></tr>'; $.each(json.data,function(i,item){ html+='<tr><td>'+item.time+'</td><td>'+item.context+'</td></tr>'; }); html+='</table>'; $('#json_re').html(html); } } ); } function a2(){ $.ajax({ url:_url, type:'get', dataType:'JSONP', success:function(data){ alert(data); } }); } </script> </head> <body> <input type="button" onClick="jsonp()" value="測試"> <input type="button" onClick="a2()" value="測試"> <div id="json_re"></div> </body> </html>
測試時請直接將程式碼儲存在本開啟即可。