记一次jQuery跨域调用JSON数据的例子

版权声明：本文为连鹏伟原创文章，未经博主允许不得转载。 https://blog.csdn.net/lpwmm/article/details/80465976

最近帮朋友做个小工具,试图从"天天基金网(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对象来直接调用属性来使用了
				}
			});