制作网站时，我们有时候为了方便快捷会调用别人写好的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数据问题的更多相关文章

  1. jquery跨域请求json数据

    //服务端生成json数据json.php <?php $json=array("Volvo","BMW","SAAB"); $cb ...

  2. AJAX跨域请求json数据的实现方法

    这篇文章介绍了AJAX跨域请求json数据的实现方法,有需要的朋友可以参考一下 我们都知道,AJAX的一大限制是不允许跨域请求. 不过通过使用JSONP来实现.JSONP是一种通过脚本标记注入的方式, ...

  3. Jquery跨域请求php数据（jsonp）

    Jquery跨域请求php数据 我们一般用到ajax的时候是在同服务器下,一般情况下不会跨域,但有时候需要调用其他域名或ip下的数据的时候,遇到跨域请求数据的时候. 今天在工作中碰到javascrip ...

  4. 用 jQuery.getJSON() 跨域请求 JSON 数据

    $.getJSON()可以理解为特殊形式的$.ajax(),手册里的说明好复杂,这里只记录一下用到的跨域请求. 先说在同一域名下,js发送数据到php,php返回JSON数据: $.getJSON(' ...

  5. 跨域请求json数据

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. jquery跨域请求数据

    jquery跨域请求数据 jquery跨越请求数据.实际开发中经常会碰到两个网站数据交互问题,当向另一个站点请求数据该如何做? 实际上非常容易,请按照下面的步骤做: 第一:编写js,通过get获取远程 ...

  7. jquery 跨域请求数据问题

    昨天参加了一个前端的面试,被问到一个跨域请求数据问题,我们之前一直用的是apicloud的api进行请求的,跨域是被apicloud封装起来的,也就没有注意跨域请求数据的问题.当被问到用jquery跨 ...

  8. 使用JSONP，jQuery的ajax跨域获取json数据

    网上找了很多资料,写的不错,推荐下: 1.深入浅出JSONP--解决ajax跨域问题 (http://www.cnblogs.com/chopper/archive/2012/03/24/240394 ...

  9. jQuery使用ajax跨域请求获取数据

    jQuery使用ajax跨域请求获取数据  跨域是我在日常面试中经常会问到的问题,这词在前端界出现的频率不低,主要原因还是由于安全限制(同源策略, 即JavaScript或Cookie只能访问同域下的 ...

随机推荐

  1. Plupload使用API

    Plupload有以下功能和特点: 1.拥有多种上传方式:HTML5.flash.silverlight以及传统的<input type=”file” />.Plupload会自动侦测当前 ...

  2. POST和GET请求区别

    最新博客站点:欢迎来访 1. 请求长度的限制 在HTTP协议中,从未规定GET/POST的请求长度限制,对于GET,对url的限制来源于浏览器或web服务器,浏览器和服务器限制了url的长度.因此,在 ...

  3. spring配置多个视图解析

    <!-- 配置视图解析器 --> <bean class="org.springframework.web.servlet.view.InternalResourceVie ...

  4. 监听浏览器返回，pushState，popstate 事件，window.history对象

    在WebApp或浏览器中,会有点击返回.后退.上一页等按钮实现自己的关闭页面.调整到指定页面.确认离开页面或执行一些其它操作的需求.可以使用 popstate 事件进行监听返回.后退.上一页操作. 一 ...

  5. .Net Core On Liunx 环境搭建之安装Mysql8

    上一篇文章安装了MongoDB紧接上一篇随笔,来进行MySql数据库的安装 服务器环境:阿里云云服务器,操作系统CentOS.7-x64 注:文章的图片是我从我的CSDN博客中直接粘贴过来的,不是扒的 ...

  6. 微信小程序-通知公告滚动提示

    wxml如下: <view class='scroll_view_border'> <view class="srcoll_view" bindtap=" ...

  7. 基于pygame的打砖块游戏，做到一半，不带做了

    跟着一个博主做的,前面的变量的定义全是内个哥们的,没带任何改动,就做了个界面,背景音乐,绘制了个小球,绘制了挡板 小球可以撞到边界反弹,然后做了砖块,定义了一个存放砖块的列表,,,就没有下文了 原博主 ...

  8. C语言实现斐波那契数列

    1.函数一用递归实现 2.函数二用循环实现 #include<stdio.h> #include<stdlib.h> #pragma warning(disable:4996) ...

  9. dot安装和使用

    1.安装 apt-get install graphviz 如果报错说缺少依赖文件,则使用apt自动安装依赖项 apt-get -f install 我在安装中报错: dpkg: unrecovera ...

  10. dotnet core 数据库

    dotnet core 数据库 程序开发过程中,需要使用数据对数据进行存储,分析等.通常而言都会使用ORM来实现关系数据库与实体对象的转化,过使用描述对象和数据库之间映射的元数据,将程序中的对象自动持 ...