使用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请求
153 0
|
JSON 前端开发 JavaScript
说说JSON和JSONP,也许你会豁然开朗
JSON(JavaScript Object Notation) 和 JSONP(JSON with Padding) 虽然只有一个字母的差别,但其实他们根本不是一回事儿:JSON是一种数据交换格式,而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。
1253 0
|
JSON 数据格式 Spring
Spring Boot 实现json和jsonp格式数据接口
Spring boot 实现json和jsonp格式数据接口 1.新建一个类继承AbstractJsonpResponseBodyAdvice,重写父类构造方法, 传入callback和jsonp参数。
2137 0
|
JSON JavaScript PHP
AJAX 跨域请求 - JSONP获取JSON数据 jsson和jsonp
Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术。
1600 0
|
Web App开发 JSON JavaScript
Json和jsonp
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/bitree1/article/details/50296037 由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现。
993 0
|
19天前
|
JSON 前端开发 Java
Json格式数据解析
Json格式数据解析
|
17天前
|
JSON NoSQL MongoDB
实时计算 Flink版产品使用合集之要将收集到的 MongoDB 数据映射成 JSON 对象而非按字段分割,该怎么操作
实时计算Flink版作为一种强大的流处理和批处理统一的计算框架,广泛应用于各种需要实时数据处理和分析的场景。实时计算Flink版通常结合SQL接口、DataStream API、以及与上下游数据源和存储系统的丰富连接器,提供了一套全面的解决方案,以应对各种实时计算需求。其低延迟、高吞吐、容错性强的特点,使其成为众多企业和组织实时数据处理首选的技术平台。以下是实时计算Flink版的一些典型使用合集。
|
19天前
|
存储 JSON 数据处理
从JSON数据到Pandas DataFrame:如何解析出所需字段
从JSON数据到Pandas DataFrame:如何解析出所需字段
32 1
|
8天前
|
SQL 存储 JSON
Hive 解析 JSON 字符串数据的实现方式
Hive 提供 `get_json_object` 函数解析 JSON 字符串,如 `{"database":"maxwell"}`。`path` 参数使用 `$`、`.`、`[]` 和 `*` 来提取数据。示例中展示了如何解析复杂 JSON 并存储到表中。此外,Hive 3.0.0及以上版本内置 `JsonSerDe` 支持直接处理 JSON 文件,无需手动解析。创建表时指定 `JsonSerDe` 序列化器,并在 HDFS 上存放 JSON 文件,可以直接查询字段内容,方便快捷。
|
19天前
|
XML JSON API
转Android上基于JSON的数据交互应用
转Android上基于JSON的数据交互应用
14 1