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 函数都能取得到数据，就看你想用哪个方法了。

来源：oschina

链接：https://my.oschina.net/u/4399096/blog/3930963

标签

jsonp

javascript