jQuery.getJSON 导致 youtube oembed 出现“Uncaught SyntaxError: Unexpected token :”

Question

这是我想要做的：

$.getJSON('http://www.youtube.com/oembed?url=http://www.youtube.com/watch%3Fv%3DB-m6JDYRFvk&callback=?', 
           function(data) { console.log(data) });

当卷曲该 URL 时，我得到以下响应：

{
    "provider_url": "http:\/\/www.youtube.com\/",
    "title": "Coder Girl",
    "html": "\u003cobject width=\"425\" height=\"344\"\u003e\u003cparam name=\"movie\" value=\"http:\/\/www.youtube.com\/v\/B-m6JDYRFvk?version=3\"\u003e\u003c\/param\u003e\u003cparam name=\"allowFullScreen\" value=\"true\"\u003e\u003c\/param\u003e\u003cparam name=\"allowscriptaccess\" value=\"always\"\u003e\u003c\/param\u003e\u003cembed src=\"http:\/\/www.youtube.com\/v\/B-m6JDYRFvk?version=3\" type=\"application\/x-shockwave-flash\" width=\"425\" height=\"344\" allowscriptaccess=\"always\" allowfullscreen=\"true\"\u003e\u003c\/embed\u003e\u003c\/object\u003e",
    "author_name": "dalechase",
    "height": 344,
    "thumbnail_width": 480,
    "width": 425,
    "version": "1.0",
    "author_url": "http:\/\/www.youtube.com\/user\/dalechase",
    "provider_name": "YouTube",
    "thumbnail_url": "http:\/\/i3.ytimg.com\/vi\/B-m6JDYRFvk\/hqdefault.jpg",
    "type": "video",
    "thumbnail_height": 360
}

但是当我尝试执行上述代码时，我得到一个Uncaught SyntaxError: Unexpected token : (Chrome)。看起来问题可能与正斜杠的转义有关，或者 jQuery 正在发送 JSONP 请求，但响应是纯 JSON。

还有其他人遇到过这个问题吗？

Answer 1

Stringify 结果对我有用。

$.getJSON('your_url_here', function(data) {
    console.log(data);  //"Object { Json content }"
    var jsonString = JSON.stringify(data);  //"{ Json content }", the "Object" literal is removed.
    var parsed = JSON.parse(jsonString); //Parse should work now.
});

Answer 2

Youtube（截至本回答时）oembed 不支持 JSONP 的请求，因此您得到的结果是正确的......但这不是您需要的 . JSONP 调用需要如下所示：

functionName({
    "provider_url": "http:\/\/www.youtube.com\/",
    "title": "Coder Girl",
    "html": "\u003cobject width=\"425\" height=\"344\"\u003e\u003cparam name=\"movie\" value=\"http:\/\/www.youtube.com\/v\/B-m6JDYRFvk?version=3\"\u003e\u003c\/param\u003e\u003cparam name=\"allowFullScreen\" value=\"true\"\u003e\u003c\/param\u003e\u003cparam name=\"allowscriptaccess\" value=\"always\"\u003e\u003c\/param\u003e\u003cembed src=\"http:\/\/www.youtube.com\/v\/B-m6JDYRFvk?version=3\" type=\"application\/x-shockwave-flash\" width=\"425\" height=\"344\" allowscriptaccess=\"always\" allowfullscreen=\"true\"\u003e\u003c\/embed\u003e\u003c\/object\u003e",
    "author_name": "dalechase",
    "height": 344,
    "thumbnail_width": 480,
    "width": 425,
    "version": "1.0",
    "author_url": "http:\/\/www.youtube.com\/user\/dalechase",
    "provider_name": "YouTube",
    "thumbnail_url": "http:\/\/i3.ytimg.com\/vi\/B-m6JDYRFvk\/hqdefault.jpg",
    "type": "video",
    "thumbnail_height": 360
});

...由于当前返回的是无效的 JavaScript（本身就是这样），这就是 JSONP 的工作原理，因此响应实际上需要是可执行的 JavaScript。 p>

只需将该代码直接放入页面中的<script> 块 (see a demo here) 即可得到相同的错误。

---

我不确定究竟你要做什么，但如果你只是在嵌入部分之后，我建议使用像 jQuery-oembed 这样的插件来做到这一点。如果您需要数据...您需要在服务器上处理 JSON，然后从您的服务器获取数据。

Answer 3

也许更好的选择是将跨域调用替换为对运行在您自己的服务器上的 Web 服务的调用，该服务为您运行调用。我的猜测是 Chrome 正在阻止跨域请求。

Answer 4

从 1.5 版开始，您不再需要在 jQuery 中使用 JSONP。尝试 $.ajax() 并设置 crossDomain:true 并删除所有 ?callback 包装器，看看它是否有效。这是一种更可靠的方法，语法也更简洁。