Jquery 跨域请求JSON数据问题
制作网站时,我们有时候为了方便快捷会调用别人写好的API接口,或者是调用一些免费的API接口获得JSON数据。比如天气,农历,网站备案信息查询等。
但是,这些API接口都是别人自己服务器上的,我们要调用就得涉及到一个跨越问题。在我们请求的时候会出现错误。
下面是我AJAX请求获得的数据错误信息:"Uncaught SyntaxError: Unexpected token :"
这个是数据也请求到了,但是还是报错,那是因为
请求到数据是一个纯Json格式的话,是不能用Jsonp方式调用的,
支持Jsonp方式的url返回的一定是js脚本,一般是一句函数调用,
请注意第二种方法中报的错是callback=,=号后面的就是你得到的,
callback是客户端页面定义的函数名,JSONP方式会在返回的
Javascript代码里面调用这个函数,JSON数据是当做参数传入方法的
而不是直接返回一个json。
这个地址不支持jsonp,请求来的数据是json,浏览器要把当做Javascript
来解析,遇到 ":" 就报错了。
如果这个地址支持JSONP,应该返回Javascript代码,在代码里面调用
callback函数才对。
下面以获取API接口的服务器时间为例:
<html>
<head>
<title>获取API接口中的时间跨域获得</title>
<meta charset="UTF-8">
<!--跨域访问json数据在URL参数中加入&jsoncallback=?
type:请求类型,GET 或 POST,默认为 GET,
async:true(异步)或 false(同步),默认情况下为true,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行;
url:发送请求的地址(跨域请求时应为绝对地址);
dataType:指定服务器返回的数据类型;
jsonpCallback:自定义JSONP回调函数名称;
success:请求成功后回调函数;
error:请求失败时调用此方法.
-->
<script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$.ajax({url:"http://api.k780.com:88/?app=life.time&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json&jsoncallback=?",
tpye:"post",
async:false,
dataType:"jsonp", // 返回的数据类型,设置为JSONP方式
jsonp:"successCallback", //指定一个查询参数名称来覆盖默认的 jsonp 回调参数名 callback
jsonpCallback:"message",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据
success: function(status){
console.log(status.result.datetime_1);
$("#registerTime").text(status.result.datetime_2);
}
});
function message(date){console.log(date.result.datetime_2)}
</script>
</head>
<body>
<div id="registerTime"></div>
</body>
</html>
我请求JSON遇到的据错误信息:"Uncaught SyntaxError: Unexpected token :"
解决方案是在URL请求地址中加入一个参数&jsoncallback=?,这样就不会出现请求的数据不是JSON报错了。
自定义的jsonp回调函数jsonpCallback:"message",message函数和 success 函数都能取得到数据,就看你想用哪个方法了。
Jquery 跨域请求JSON数据问题的更多相关文章
- jquery跨域请求json数据
//服务端生成json数据json.php <?php $json=array("Volvo","BMW","SAAB"); $cb ...
- AJAX跨域请求json数据的实现方法
这篇文章介绍了AJAX跨域请求json数据的实现方法,有需要的朋友可以参考一下 我们都知道,AJAX的一大限制是不允许跨域请求. 不过通过使用JSONP来实现.JSONP是一种通过脚本标记注入的方式, ...
- Jquery跨域请求php数据(jsonp)
Jquery跨域请求php数据 我们一般用到ajax的时候是在同服务器下,一般情况下不会跨域,但有时候需要调用其他域名或ip下的数据的时候,遇到跨域请求数据的时候. 今天在工作中碰到javascrip ...
- 用 jQuery.getJSON() 跨域请求 JSON 数据
$.getJSON()可以理解为特殊形式的$.ajax(),手册里的说明好复杂,这里只记录一下用到的跨域请求. 先说在同一域名下,js发送数据到php,php返回JSON数据: $.getJSON(' ...
- 跨域请求json数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jquery跨域请求数据
jquery跨域请求数据 jquery跨越请求数据.实际开发中经常会碰到两个网站数据交互问题,当向另一个站点请求数据该如何做? 实际上非常容易,请按照下面的步骤做: 第一:编写js,通过get获取远程 ...
- jquery 跨域请求数据问题
昨天参加了一个前端的面试,被问到一个跨域请求数据问题,我们之前一直用的是apicloud的api进行请求的,跨域是被apicloud封装起来的,也就没有注意跨域请求数据的问题.当被问到用jquery跨 ...
- 使用JSONP,jQuery的ajax跨域获取json数据
网上找了很多资料,写的不错,推荐下: 1.深入浅出JSONP--解决ajax跨域问题 (http://www.cnblogs.com/chopper/archive/2012/03/24/240394 ...
- jQuery使用ajax跨域请求获取数据
jQuery使用ajax跨域请求获取数据 跨域是我在日常面试中经常会问到的问题,这词在前端界出现的频率不低,主要原因还是由于安全限制(同源策略, 即JavaScript或Cookie只能访问同域下的 ...
随机推荐
- iOS 语言国际化配置
所谓的iOS 国际化,就是根据系统不同的语言自动切换. 首先,如图: 创建一个.strings文件,以“Localizable.strings”为文件名: 创建完之后,在XCode的右边勾选自 ...
- qt项目:员工信息管理系统
开发一个员工信息管理系统 一.项目具体要求: 1.用qt开发界面,数据库用QSqlite 数据库文件名:demostudent.db 2.通过界面能够查看到数据库中员工信息表中内容,包括员工姓名.年龄 ...
- python查找目录及子目录下特定文件
写这篇博客的缘由: 面试归来翻脉脉发现一个陌生的朋友提出一个面试题,设计实现遍历目录及子目录,抓取.pyc文件. 并贴出两种实现方法: 个人感觉,这两种方法中规中矩,不像是python的风格.pyth ...
- 蒜头君学英语--set()练习
题目描述 蒜头君快要考托福了,这几天,蒜头君每天早上都起来记英语单词.花椰妹时不时地来考一考蒜头君:花椰妹会询问蒜头君一个单词,如果蒜头君背过这个单词,蒜头君会告诉花椰妹这个单词的意思,不然蒜头君会跟 ...
- Java中抽象类与接口的比较
一.基本概念 抽象类:表示这个对象是什么:比如 男人.女人这两个类,他们的抽象类是人,说明男人.女人是人: 接口:表示这个对象能做什么:比如人可以吃东西,狗也可以吃东西,将“吃东西”定义为一个接口,让 ...
- 路由器基础配置之dhcp配置
我们将以上面的拓扑图为例,router9为dhcp的服务器,为pc4,5,6分配三个不同网段的地址,pool为要分配的三个地址池,我们要把pc4设置为12网段,pc5设置成34网段,pc6设置成56网 ...
- Delphi方法重载
unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms ...
- Python学习第二弹
昨天补充: 编码: Unicode ; utf-8 ; GBK 关系: 关键字:1. continue 终止当前循环,进行下一次循环 2. break 终止循环 题6解法2: ...
- python中string,time,datetime三者之间的转化
这里time特指import time中的对象,datetime 特指from datetime import datetime中的对象,string指python自带的字符数据类型. 从使用的情况来 ...
- java性能测试工具 jprofiler
1.下载地址 官方网址:http://www.ej-technologies.com/products/jprofiler/overview.html 2.Eclipse集成 该文(http://ji ...