記一次jQuery跨域呼叫JSON資料的例子
阿新 • • 發佈:2019-02-16
最近幫朋友做個小工具,試圖從"天天基金網(http://fund.eastmoney.com)"上獲取相應基金程式碼的一些收益率資料,通過分析發現網站首頁的搜尋基金程式碼真實的請求路徑是一個js:
http://fundgz.1234567.com.cn/js/002624.js?rt=1527344754062
這裡的002624就是搜尋的基金程式碼,rt則是要查詢的時間(UNIX時間戳格式)
看上去很簡單的,用jQuery的$.getJSON不就可以搞定了麼,但是直接這樣呼叫的話瀏覽器會丟擲錯誤
"XMLHttpRequest cannot load http://fundgz.1234567.com.cn/js/002624.js?rt=1527344754062. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:8020' is therefore not allowed access."
經查,這是js安全策略中不允許跨域進行引用導致的,再翻資料可以用jQuery中的$.ajax()設定相應的引數來實現跨域呼叫
還是先來看一下直接使用瀏覽器開啟這個js地址返回的資料:
jsonpgz({"fundcode":"002624","name":"廣發優企精選混合","jzrq":"2018-05-24","dwjz":"1.4000","gsz":"1.3947","gszzl":"-0.38","gztime":"2018-05-25 15:00"});
可以看到其實這個js返回的並不是純粹的JSON格式的資料,前面加了一個jsonpgz的函式,這個很關鍵,因為在$.ajax()中還必須設定一下這個函式的名稱,否則還是獲取不到正確的結果,下面是測試通過的程式碼:
//在自己的頁面中需要手工把這個jsonpgz函式寫一下 function jsonpgz(data) { return(data); } $.ajax({ type: "get", url: "http://fundgz.1234567.com.cn/js/002624.js?rt=1527344754062", dataType: "jsonp", //這個設定可以允許跨域呼叫js jsonpCallback: "jsonpgz", //這個很重要,是根據跨域目標伺服器上返回的json資料中的函式起名 success: function(data) { alert(data.name); //這裡就可以將data當作是JSON物件來直接呼叫屬性來使用了 } });