1. 程式人生 > >記一次jQuery跨域呼叫JSON資料的例子

記一次jQuery跨域呼叫JSON資料的例子

最近幫朋友做個小工具,試圖從"天天基金網(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物件來直接呼叫屬性來使用了
				}
			});