使用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请求
182 0
|
JSON 前端开发 JavaScript
说说JSON和JSONP,也许你会豁然开朗
JSON(JavaScript Object Notation) 和 JSONP(JSON with Padding) 虽然只有一个字母的差别,但其实他们根本不是一回事儿:JSON是一种数据交换格式,而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。
1286 0
|
JSON 数据格式 Spring
Spring Boot 实现json和jsonp格式数据接口
Spring boot 实现json和jsonp格式数据接口 1.新建一个类继承AbstractJsonpResponseBodyAdvice,重写父类构造方法, 传入callback和jsonp参数。
2195 0
|
JSON JavaScript PHP
AJAX 跨域请求 - JSONP获取JSON数据 jsson和jsonp
Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术。
1668 0
|
Web App开发 JSON JavaScript
Json和jsonp
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/bitree1/article/details/50296037 由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现。
1023 0
|
2月前
|
数据采集 JSON 数据处理
抓取和分析JSON数据:使用Python构建数据处理管道
在大数据时代,电商网站如亚马逊、京东等成为数据采集的重要来源。本文介绍如何使用Python结合代理IP、多线程等技术,高效、隐秘地抓取并处理电商网站的JSON数据。通过爬虫代理服务,模拟真实用户行为,提升抓取效率和稳定性。示例代码展示了如何抓取亚马逊商品信息并进行解析。
抓取和分析JSON数据:使用Python构建数据处理管道
|
28天前
|
JSON 数据格式 索引
Python中序列化/反序列化JSON格式的数据
【11月更文挑战第4天】本文介绍了 Python 中使用 `json` 模块进行序列化和反序列化的操作。序列化是指将 Python 对象(如字典、列表)转换为 JSON 字符串,主要使用 `json.dumps` 方法。示例包括基本的字典和列表序列化,以及自定义类的序列化。反序列化则是将 JSON 字符串转换回 Python 对象,使用 `json.loads` 方法。文中还提供了具体的代码示例,展示了如何处理不同类型的 Python 对象。
|
1月前
|
JSON 缓存 前端开发
PHP如何高效地处理JSON数据:从编码到解码
在现代Web开发中,JSON已成为数据交换的标准格式。本文探讨了PHP如何高效处理JSON数据,包括编码和解码的过程。通过简化数据结构、使用优化选项、缓存机制及合理设置解码参数等方法,可以显著提升JSON处理的性能,确保系统快速稳定运行。
|
25天前
|
JSON API 数据安全/隐私保护
拍立淘按图搜索API接口返回数据的JSON格式示例
拍立淘按图搜索API接口允许用户通过上传图片来搜索相似的商品,该接口返回的通常是一个JSON格式的响应,其中包含了与上传图片相似的商品信息。以下是一个基于淘宝平台的拍立淘按图搜索API接口返回数据的JSON格式示例,同时提供对其关键字段的解释
|
2月前
|
JSON JavaScript Java
在Java中处理JSON数据:Jackson与Gson库比较
本文介绍了JSON数据交换格式及其在Java中的应用,重点探讨了两个强大的JSON处理库——Jackson和Gson。文章详细讲解了Jackson库的核心功能,包括数据绑定、流式API和树模型,并通过示例演示了如何使用Jackson进行JSON解析和生成。最后,作者分享了一些实用的代码片段和使用技巧,帮助读者更好地理解和应用这些工具。
116 0
在Java中处理JSON数据:Jackson与Gson库比较