jQuery ajax 返回 Uncaught SyntaxError: Unexpected token :

[binarymann]

我写了个简单的jQuery ajax 访问 http://www.randomtext.me/api/

jQuery.ajax({
url: "http://www.randomtext.me/api/",
dataType: 'jsonp',
async: false,
type: 'GET',
success:function(jsonData) {
response = jsonData["text_out"];
},
error:function(jsonData) {
console.log(jsonData);
}
})

但怎么老是返回 Uncaught SyntaxError: Unexpected token :呢？

在chrome里面看到报错的地方
?callback=jQuery110205438157829921693_1430892961914&_=1430892961916:1 Uncaught SyntaxError: Unexpected token :

点进去就是返回的jsonData object，搞不清楚了...

[binarymann]

访问这个地址就没有问题...
http://itunes.apple.com/search?term=yelp&country=us&entity=software

[feiyuanqiu]

这个地址返回的是 json 格式的数据，你代码里面指定的处理方式是 jsonp，所以就报错了

$.get('http://www.randomtext.me/api/', function (res) { console.log(res); }, 'json');

这样就行了

[lichao]

如果是 JSONP 的话，你 API 返回的应该是一个回调函数，而不是一个 JS 对象

[lichao]

http://itunes.apple.com/search?term=yelp&country=us&entity=software&callback=jQuery1110043501702789217234_1430893940465&_=1430893940466

http://www.randomtext.me/api/?callback=jQuery1110043501702789217234_1430893940465&_=1430893940467

你对比一下，就明白了

[binarymann]

@feiyuanqiu 在请教下对一些服务如果用json的话会失败因为跨域，如何解决呢？

XMLHttpRequest cannot load xxx No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

[lichao]

@binarymann JS 有跨域限制，但是服务端没有这个限制，你可以在服务端放个类似 proxy.php，通过服务端去访问其它域的内容

[feiyuanqiu]

@binarymann 用 jsonp 啊... jsonp 就是用来解决跨域问题的

[binarymann]

@feiyuanqiu
@lichao

请教两位大侠，如果用jsonp的话，要怎么正确的读取返回的object呢？

[lichao]

@binarymann 放你的服务端支持回调函数

echo $_GET['callback']. '(' . json_encode($obj) . ');';

[lichao]

@binarymann 还是你上面的例子，参考人家 API 返回的内容

http://itunes.apple.com/search?term=yelp&country=us&entity=software&callback=jQuery1110043501702789217234_1430893940465&_=1430893940466

[feiyuanqiu]

@binarymann

1、需要接口那边支持，一般是你传过去两个参数 回调函数名 和 查询参数，比如你主楼的这个：
?callback=jQuery110205438157829921693_1430892961914&_=1430892961916

回调函数名是 jQuery110205438157829921693_1430892961914，查询参数是 _=1430892961916

如果接口支持 jsonp，就应该返回类似这样的数据：
jQuery110205438157829921693_1430892961914({'type':'test'});

也就是接口会返回一段 js 代码，调用你传入的回调函数，传入的实参就是接口数据，所以需要本地实现 jQuery110205438157829921693_1430892961914 这个函数

如果你是用的 jQuery，直接就按照普通的 ajax 调用的方式处理数据就行了，如果没有用 jQuery，就需要这样做：

2、你需要在本地实现这个函数 jQuery110205438157829921693_1430892961914，用来处理接口返回数据，比如：
var jQuery110205438157829921693_1430892961914 = function (data) { console.log(data); }

3、为 body 添加 script 元素，开始执行请求：
var script = document.createElement('script');
script.src = 'http://xxx.com?callback=jQuery110205438157829921693_1430892961914&_=1430892961916';
document.body.appendChild(script);