使用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请求
148 0
|
JSON 前端开发 JavaScript
说说JSON和JSONP,也许你会豁然开朗
JSON(JavaScript Object Notation) 和 JSONP(JSON with Padding) 虽然只有一个字母的差别,但其实他们根本不是一回事儿:JSON是一种数据交换格式,而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。
1249 0
|
JSON 数据格式 Spring
Spring Boot 实现json和jsonp格式数据接口
Spring boot 实现json和jsonp格式数据接口 1.新建一个类继承AbstractJsonpResponseBodyAdvice,重写父类构造方法, 传入callback和jsonp参数。
2125 0
|
JSON JavaScript PHP
AJAX 跨域请求 - JSONP获取JSON数据 jsson和jsonp
Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术。
1590 0
|
Web App开发 JSON JavaScript
Json和jsonp
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/bitree1/article/details/50296037 由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现。
990 0
|
3月前
|
JSON PHP 数据格式
|
1月前
|
存储 JSON Apache
揭秘 Variant 数据类型:灵活应对半结构化数据,JSON查询提速超 8 倍,存储空间节省 65%
在最新发布的阿里云数据库 SelectDB 的内核 Apache Doris 2.1 新版本中,我们引入了全新的数据类型 Variant,对半结构化数据分析能力进行了全面增强。无需提前在表结构中定义具体的列,彻底改变了 Doris 过去基于 String、JSONB 等行存类型的存储和查询方式。
揭秘 Variant 数据类型:灵活应对半结构化数据,JSON查询提速超 8 倍,存储空间节省 65%
|
2月前
|
XML 机器学习/深度学习 JSON
在火狐浏览器调ajax获取json数据时,控制台提示“XML 解析错误:格式不佳”。
在火狐浏览器调ajax获取json数据时,控制台提示“XML 解析错误:格式不佳”。
29 0
在火狐浏览器调ajax获取json数据时,控制台提示“XML 解析错误:格式不佳”。
|
2天前
|
JSON 数据可视化 定位技术
python_将包含汉字的字典数据写入json(将datav的全省数据中的贵州区域数据取出来)
python_将包含汉字的字典数据写入json(将datav的全省数据中的贵州区域数据取出来)
7 0
|
15天前
|
存储 JSON JavaScript
「Python系列」Python JSON数据解析
在Python中解析JSON数据通常使用`json`模块。`json`模块提供了将JSON格式的数据转换为Python对象(如列表、字典等)以及将Python对象转换为JSON格式的数据的方法。
31 0