单纯的我 镇! 问题来源于Echarts开发时,本地测试已成功在与接口对接时出现异步加载时加载不成功,当时我就懵逼了... 这代码一样,我改了个ip就不行了?? 莫非Echarts不支持url使用 ip地址? 然后宝宝就方了。。。
问题描述
$.get('http://localhost:8080/Echarts/echarts').done(function (data) {
data = eval('('+data+')');
// 填入数据
myChart.setOption({
series: [{
// 根据名字对应到相应的系列
name: '销量',
data: data
}]
});
});
下面看更改后的代码,也就是在调试整合时所做的一些改变
$.get('http://192.168.1.144:8080/Echarts/echarts').done(function (data) {
data = eval('('+data+')');
// 填入数据
myChart.setOption({
series: [{
// 根据名字对应到相应的系列
name: '销量',
data: data
}]
});
});
没错,代码还是这个代码,说调试仅仅只是更改了它的url而已,其他的并未改变,来看看结果
没错,它不能正常显示了,随后尝试改成自己的ip实际地址依旧不成,又试了127.1.0.0 结果运行还是错误。 用AJAX的方式也不行,所以可以排除是Echarts不支持使用IP地址作为异步URL。
问题解决
问题出来了,那就找呗,认真排除后发现问题确实就是跨域的原因,因为js是不支持跨域来进行一个访问,当然有解决方案,下面会提到怎么解决。
可能会好奇,为什么我明明使用的是自己的ip地址,我本机吖,怎么还会存在跨域呢? 原因其实是我们操作的时候忽略了一个问题,具体回顾一下我们的那段代码
$.get('http://127.1.0.0:8080/Echarts/echarts').done(function (data) {
data = eval('('+data+')');
// 填入数据
myChart.setOption({
series: [{
// 根据名字对应到相应的系列
name: '销量',
data: data
}]
});
});
再看一下,浏览器中的url: http://localhost:8080/Echarts/Echarts.html(看上图) 详细对比,,http://127.1.0.0:8080/Echarts/echarts 问题出来了,一个是localhost,一个127.1.0.0 虽然它们都是代表了当前计算机,但是对于程序来说它不认呐http://,这个时候可能秒懂了,是因为浏览器中的与JS中的地址不同所导致。
看结果:
果然,行了。。。。
总结:在浏览器中输入的URL必须跟程序中异步的URL一致; 或者说同一个域名,localhost与127.1.0.0 二者不兼容,会造成跨域而导致异步访问不成功。
额外话,这个问题在通常开发中基本不存在,或说几率很少很少,实际情况中很少会遇到要跨域去异步加载,只要稍加注意就行。
好了,最后再说说如何解决跨域的问题,在js中可以使用JSONP来解决这个跨域的问题,大概可以分解为,
1.使用ajax方式并设置好JSONP接收、2.异步得到数据之后再自己拼凑数据格式 最后写入。
附上相关JSONP资料:JSONP详解:http://blog.csdn.net/dcb_ripple/article/details/51793081 、JSON跟JSONP的区别:http://blog.csdn.net/dcb_ripple/article/details/51793090、JSONP的两种实现方式:http://www.cnblogs.com/Denny_Yang/p/4425045.html