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

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

一、跨域报错


首先,是跨域请求的问题,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格式解析数据,在控制台报了如下错误:

20181227182539437.gif


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

折腾了半天,最后解决方案如下:

使用雅虎提供的YQL代理将数据转换,并且支持网上绝大多数的数据格式,我们只需要按照它指定的格式提交地址即可。

具体代码如下

1. //目标请求url
2. var target="http://www.weather.com.cn/data/sk/101280601.html";
3. //ajax请求
4.     $.ajax({    
5. //雅虎代理url
6. url: 'http://query.yahooapis.com/v1/public/yql',    
7. //指定数据格式
8. dataType: 'jsonp',  
9. //雅虎代理要求的数据格式
10. data: {    
11. q: "select * from json where url=\'" + target+ "'",    
12. //代理返回格式
13. format: "json"
14.             },    
15. success: function (data) {  
16. //在控制台输出,页面按F12查看,  
17. console.log(data);
18.             }    
19.         });

 

相关文章
|
JSON 前端开发 JavaScript
js:json请求和jsonp请求
js:json请求和jsonp请求
297 0
|
JSON 前端开发 JavaScript
说说JSON和JSONP,也许你会豁然开朗
JSON(JavaScript Object Notation) 和 JSONP(JSON with Padding) 虽然只有一个字母的差别,但其实他们根本不是一回事儿:JSON是一种数据交换格式,而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。
1352 0
|
JSON 数据格式 Spring
Spring Boot 实现json和jsonp格式数据接口
Spring boot 实现json和jsonp格式数据接口 1.新建一个类继承AbstractJsonpResponseBodyAdvice,重写父类构造方法, 传入callback和jsonp参数。
2289 0
|
JSON JavaScript PHP
AJAX 跨域请求 - JSONP获取JSON数据 jsson和jsonp
Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术。
1746 0
|
Web App开发 JSON JavaScript
Json和jsonp
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/bitree1/article/details/50296037 由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现。
1068 0
|
1月前
|
JSON API 数据安全/隐私保护
深度分析淘宝卖家订单详情API接口,用json返回数据
淘宝卖家订单详情API(taobao.trade.fullinfo.get)是淘宝开放平台提供的重要接口,用于获取单个订单的完整信息,包括订单状态、买家信息、商品明细、支付与物流信息等,支撑订单管理、ERP对接及售后处理。需通过appkey、appsecret和session认证,并遵守调用频率与数据权限限制。本文详解其使用方法并附Python调用示例。
|
21天前
|
机器学习/深度学习 JSON 监控
淘宝拍立淘按图搜索与商品详情API的JSON数据返回详解
通过调用taobao.item.get接口,获取商品标题、价格、销量、SKU、图片、属性、促销信息等全量数据。
|
9天前
|
JSON 缓存 自然语言处理
多语言实时数据微店商品详情API:技术实现与JSON数据解析指南
通过以上技术实现与解析指南,开发者可高效构建支持多语言的实时商品详情系统,满足全球化电商场景需求。
|
22天前
|
JSON API 数据格式
干货满满!淘宝商品详情数据,淘宝API(json数据返回)
淘宝商品详情 API 接口(如 taobao.item.get)的 JSON 数据返回示例如下
|
1月前
|
JSON 算法 安全
淘宝商品详情API接口系列,json数据返回
淘宝开放平台提供了多种API接口用于获取商品详情信息,主要通过 淘宝开放平台(Taobao Open Platform, TOP) 的 taobao.tbk.item.info.get(淘宝客商品详情)或 taobao.item.get(标准商品API)等接口实现。以下是关键信息及JSON返回示例: