javascript jQuery JSON 解析 - 意外的令牌错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8933174/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery JSON Parse - Unexpected Token Error
提问by Matt
I'm trying to use Envato API to gather some user stats w/ jQuery. I'll show an example response JSON:
我正在尝试使用 Envato API 通过 jQuery 收集一些用户统计信息。我将展示一个示例响应 JSON：
{
"new-files-from-user":[
{
"thumbnail":"http://3.s3.envato.com/files/60560.jpg",
"tags":"",
"user":"collis",
"url":"http://themeforest.net/item/manilla-photoshop-design/22803",
"live_preview_url":"http://2.s3.envato.com/files/60561/1_Home.__large_preview.jpg",
"uploaded_on":"Wed Dec 03 03:32:35 +1100 2008",
"cost":"10.00",
"item":"Manilla Photoshop Design",
"sales":"294",
"rating":"4",
"id":"22803"
},
{
"thumbnail":"http://2.s3.envato.com/files/60223.jpg",
"tags":"clean",
"user":"collis",
"url":"http://themeforest.net/item/black-white-simple-theme/22705",
"live_preview_url":"http://0.s3.envato.com/files/60224/1_home.__large_preview.jpg",
"uploaded_on":"Tue Dec 02 04:01:12 +1100 2008",
"cost":"8.00","item":"Black + White Simple Theme",
"sales":"272","
rating":"4",
"id":"22705"
},
{
"thumbnail":"http://1.s3.envato.com/files/44556.jpg",
"tags":"clean",
"user":"collis",
"url":"http://themeforest.net/item/quik-v1-admin-skin/17314",
"live_preview_url":"http://3.s3.envato.com/files/44557/1_green.__large_preview.jpg",
"uploaded_on":"Fri Sep 05 07:30:24 +1000 2008","cost":"12.00",
"item":"Quik v1 Admin Skin",
"sales":"336",
"rating":"5",
"id":"17314"
},
{"thumbnail":"http://3.s3.envato.com/files/45212.jpg",
"tags":"clean",
"user":"collis",
"url":"http://themeforest.net/item/freshcorp-business-template/17528",
"live_preview_url":"http://3.s3.envato.com/files/45213/1_Homepage.__large_preview.jpg",
"uploaded_on":"Tue Sep 09 06:10:50 +1000 2008",
"cost":"20.00",
"item":"FreshCorp - Business Template",
"sales":"277",
"rating":"4","id":"17528"
},
{"thumbnail":"http://0.s3.envato.com/files/45739.jpg",
"tags":"clean",
"user":"collis",
"url":"http://themeforest.net/item/real-estate-html-template/17732",
"live_preview_url":"http://0.s3.envato.com/files/45740/1_homepage.__large_preview.jpg",
"uploaded_on":"Fri Sep 12 14:22:45 +1000 2008",
"cost":"20.00","item":"Real Estate HTML Template",
"sales":"175",
"rating":"4",
"id":"17732"
}
]
}
Here's my script:
这是我的脚本：
<script type="text/javascript">
//this gets JSON data from an url
$.getJSON("http://marketplace.envato.com/api/edge/new-files-from-user:collins,themeforest.json?callback=?",
//this function gets called when data has been recieved
function(data){
//parsing JSON data, line by line(like foreach)
$.each(data['new-items-from-user'], function(i,item){
//puts all titles in our div
$("#test").append(item.item+"<br />");
});
});
</script>
<div id="test"></div>
And here's what I get in the Chrome console: 'Uncaught SyntaxError: Unexpected Token :' (pic http://imgur.com/8qoqO).
这是我在 Chrome 控制台中得到的：'Uncaught SyntaxError: Unexpected Token :'（图片http://imgur.com/8qoqO）。
I'm not sure if I have an error in my code that's causing this problem, but here's a fiddle to see the result: http://jsfiddle.net/wkmDj/
我不确定我的代码中是否有导致这个问题的错误，但这里有一个小提琴来查看结果：http: //jsfiddle.net/wkmDj/
Thanks, Matt
谢谢，马特
回答by Pointy
In the second object in the list in the JSON response, there's a line break in the middle of a property name:
在 JSON 响应列表中的第二个对象中，属性名称中间有一个换行符：
"sales":"272","
rating":"4",
"id":"22705"
Maybe that's just a transcription error.
也许这只是转录错误。
edit— OK that was a transcription error. I think the problem is that the website you're talking to doesn't really understand JSONP properly. It's returning JSON that looks fine, but JSONP requires that the JSON be returned wrapped up in a function call. In other words, the response should look like:
编辑- 好的，这是一个转录错误。我认为问题在于您正在与之交谈的网站并没有真正正确理解 JSONP。它返回的 JSON 看起来不错，但 JSONP 要求返回的 JSON 包含在函数调用中。换句话说，响应应该是这样的：
somefunction({"new-items-from-user":[{ ... }]});
It's not doing that, so when the JSON is evaluated by itself it constitutes a syntax error because JavaScript thinks that leading {is the start of a codeblock, not an object literal.
它没有这样做，所以当 JSON 被自身评估时，它构成了一个语法错误，因为 JavaScript 认为前导{是代码块的开始，而不是对象字面量。
Looking at the documentation for that API, I see nothing to suggest that it's intended to be used as a JSONP service. It looks like they intend that it be used from something like a phone app or from a web server or something like that, but not from JavaScript in the browser via JSONP.
查看该 API 的文档，我看不出任何迹象表明它旨在用作 JSONP 服务。看起来他们打算从电话应用程序或 Web 服务器或类似的东西中使用它，而不是通过 JSONP 从浏览器中的 JavaScript 中使用它。
回答by Steve Wellens
One possible problem, the code has:
一个可能的问题，代码有：
data['new-items-from-user']
But the data looks like this:
但是数据看起来是这样的：
{"new-files-from-user":[]}
回答by Diode
Like @Pointy said, response is not getting parsed as json, but as script. So evalfunction is being executed.
就像@Pointy 所说的，响应不会被解析为 json，而是被解析为脚本。所以eval函数正在执行。
eval('{"new-files-from-user":[]}');
and it is giving error.
它给出了错误。
In the case of jsonp if the url is http://marketplace.envato.com/api/edge/new-files-from-user:mechabyte,themeforest.json, call should be made as
在 jsonp 的情况下，如果 url 是http://marketplace.envato.com/api/edge/new-files-from-user:mechabyte,themeforest.json，则调用应为
http://marketplace.envato.com/api/edge/new-files-from-user:mechabyte,themeforest.json?callback=mycallback
and response should be
和回应应该是
mycallback({"new-files-from-user":[]});
and if you have a function mycallback
如果你有一个功能 mycallback
eval('mycallback({"new-files-from-user":[]});');
will work
将工作
or if you don't set a callback
或者如果你没有设置回调
http://marketplace.envato.com/api/edge/new-files-from-user:mechabyte,themeforest.json?callback=
the response should be
回应应该是
({"new-files-from-user":[]});
then
然后
eval('({"new-files-from-user":[]});');
will work
将工作
In your case you can see that each time jQuery is setting the parameter callbacklike
你的情况，你可以看到，每次jQuery是设置参数callback一样
callback=jQuery171009222313176259944_1327017091413
so the response should be
所以回应应该是
jQuery171009222313176259944_1327017091413({"new-files-from-user":[]});
e.g: https://twitter.com/statuses/user_timeline/tomhanks.json?callback=myCallback&count=5
例如：https: //twitter.com/statuses/user_timeline/tomhanks.json?callback=myCallback&count=5
But as the response is a json string this will work. (subject to same origin policy)
但由于响应是一个 json 字符串，这将起作用。（以同源政策为准）
$.get("http://marketplace.envato.com/api/v3/new-files-from-user:turkhitbox,themeforest.json?callback=?",
function (data){
data = $.parseJSON(data);
console.log(data);
});
