使用YQL解决跨域请求json转jsonp问题

最近学习调用公共接口API获取天气、时间等请求时,发现jQuery是一个不错的选择,因为返回的数据一般是json格式的,jQuery对这种格式有很好的支持,不用像后台Java类一样导入json包、封装域对象等繁琐的操作,另外这些结果一般都需要在前台显示,所以放在前台更显得优雅、高效。
现在以调用国家天气接口API为例,说明在调用的过程中也遇到的一些问题。

一、跨域报错

首先,是跨域请求的问题,jQuery默认不支持跨域请求,报错如下:

index.html:1 XMLHttpRequest cannot load http://www.weather.com.cn/data/sk/101280601.html. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

这个问题很快的到了解决:
1.通过给ajax添加crossDomain:true属性指定跨域
2.将数据格式(dataType)指定为jsonp ,其实指定了这个默认就会开启跨域了,不用进行1操作

二、返回格式报错

这个问题的主要原因在于jQuery ajax要求请求数据类型和返回数据类型是一致的。

因为网站返回的数据类型是json,这跟我们指定的数据交互格式jsonp不一致,在调用时可以看到网络已经返回数据,但是$.ajax并不能以jsonp格式解析数据,在控制台报了如下错误:

Uncaught SyntaxError: Unexpected token :

这个问题就有点难度了,请求格式不是jsonp,直接不让发送数据,而返回数据又固定为json,真是巨坑啊。

折腾了半天,最后解决方案如下:
使用雅虎提供的YQL代理将数据转换,并且支持网上绝大多数的数据格式,我们只需要按照它指定的格式提交地址即可。
具体代码如下:

//目标请求url
var target="http://www.weather.com.cn/data/sk/101280601.html";
//ajax请求
    $.ajax({    
            //雅虎代理url
            url: 'http://query.yahooapis.com/v1/public/yql',    
            //指定数据格式
            dataType: 'jsonp',  
            //雅虎代理要求的数据格式
            data: {    
                q: "select * from json where url=\'" + target+ "'",    
                //代理返回格式
                format: "json"    
            },    
            success: function (data) {  
                //在控制台输出,页面按F12查看,  
                console.log(data);
            }    
        });
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值