json Uncaught SyntaxError: Unexpected token :答案

【问题标题】：json Uncaught SyntaxError: Unexpected token :json Uncaught SyntaxError: Unexpected token :
【发布时间】：2011-12-17 16:58:39
【问题描述】：

尝试调用并检索一个非常简单的一行 JSON 文件。

$(document).ready(function() {

    jQuery.ajax({ 
        type: 'GET',
        url: 'http://wncrunners.com/admin/colors.json' ,
        dataType: 'jsonp', 
        success: function(data) { 
            alert('success');
        }
    });


  });//end document.ready

这是原始请求：

GET http://wncrunners.com/admin/colors.json?callback=jQuery16406345664265099913_1319854793396&_=1319854793399 HTTP/1.1
Host: wncrunners.com
Connection: keep-alive
Cache-Control: max-age=0
User-Agent: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/535.2 (KHTML, like Gecko) Chrome/15.0.874.106 Safari/535.2
Accept: */*
Referer: http://localhost:8888/jquery/Test.html
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3

这是原始响应：

HTTP/1.1 200 OK
Date: Sat, 29 Oct 2011 02:21:24 GMT
Server: Apache/1.3.33 (Unix) mod_ssl/2.8.22 OpenSSL/0.9.7d SE/0.5.3
Last-Modified: Fri, 28 Oct 2011 17:48:47 GMT
ETag: "166a2402-10-4eaaeaff"
Accept-Ranges: bytes
Content-Length: 16
Content-Type: text/plain
Connection: close

{"red" : "#f00"}

JSON 在响应中返回（红色：#f00），但 Chrome 报告 Uncaught SyntaxError: Unexpected token : colors.json:1

如果我直接导航到 url 本身，则会返回 JSON 并显示在浏览器中。

如果我将 colors.json 的内容粘贴到 JSLINT 中，则 json 会验证。

任何想法为什么我不能得到这个错误并且我从来没有成功回调？

EDIT - 上面的 jQuery.ajax() 调用在 jsfiddle.net 上完美运行，并按预期返回警报“成功”。

EDIT 2 - 这个 URL 工作正常 'http://api.wunderground.com/api/8ac447ee36aa2505/geolookup/conditions/q/IA/Cedar_Rapids.json' 我注意到它返回为TYPE: text/javascript 和 Chrome 没有抛出 Unexpected Token。我已经测试了其他几个 url，唯一没有抛出 Unexpected Token 的是 wunderground，它以 TYPE: text/javascript 返回。

以 text/plain 和 application/json 返回的流未正确解析。

【问题讨论】：

附带说明，我意识到在浏览器中点击 url 时，“#”实际上并没有出现在 json 中。 wncrunners.com/admin/colors.json
感谢您的意见。我删除了 # 以测试 Keith 的理论。删除它不会影响错误。我还从文件中删除了 .json 扩展名。同样的错误。

标签： jquery ajax json syntax-error

【解决方案1】：

你告诉 jQuery 期待一个 JSONP 响应，这就是为什么 jQuery 将 callback=jQuery16406345664265099913_1319854793396&_=1319854793399 部分添加到 URL（你可以在请求的转储中看到这一点）。

您返回的是 JSON，而不是 JSONP。您的回复看起来像

{"red" : "#f00"}

而 jQuery 期待这样的事情：

jQuery16406345664265099913_1319854793396({"red" : "#f00"})

如果您确实需要使用 JSONP 来绕过同源策略，那么服务于 colors.json 的服务器需要能够实际返回 JSONP 响应。

如果同源策略对您的应用程序来说不是问题，那么您只需将jQuery.ajax 调用中的dataType 修复为json 而不是jsonp。

【讨论】：

谢谢约翰。如果我采用相同的代码并将其指向 api.wunderground.com/api/8ac447ee36aa2505/geolookup/conditions/…' 则响应确实将 jQueryxxxx() 包裹在 json 数据周围，代码运行良好，并且我收到“成功”警报。我无法更改远程服务器提供 JSON 文件的方式。如果我使用 dataType: 'json' 那么我得到 XMLHttpRequest cannot load isohunt.com/js/json.php?ihq=test。 Access-Control-Allow-Origin 不允许来源localhost:8888。
好的。您提供的 Weather Underground URL确实响应 JSONP 请求。（如果您将 ?callback=something 添加到该 URL，您会看到这一点。使用 dataType: json 时遇到的错误是由于相同的来源策略。让我添加到我的答案中。
问题似乎是如果服务器响应 Type: text/javascript，那么 Chrome 就不会因为 Uncaught SyntaxError 而咆哮。如果远程服务器返回类型：text/plain 或 application/json，则 Chrome 会报告 Uncaught SyntaxError。
@John Flatness - 谢谢你的解释，非常有用！
谢谢！！这非常有帮助。

【解决方案2】：

过去几天我一直在尝试自己解决这个问题。使用旧的 json dataType 会给您带来跨源问题，而将 dataType 设置为 jsonp 会使数据“不可读”，如上所述。所以显然有两种出路，第一种对我没有用，但似乎是一个潜在的解决方案，我可能做错了什么。这在此处进行了解释 [https://learn.jquery.com/ajax/working-with-jsonp/]。

对我有用的一个如下： 1-下载ajax跨域插件[http://www.ajax-cross-origin.com/]。 2-在普通 jQuery 链接下方添加一个脚本链接。 3-将“crossOrigin：true”行添加到您的ajax函数中。

好走！这是我的工作代码：

  $.ajax({
      crossOrigin: true,
      url : "https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=-33.86,151.195&radius=5000&type=ATM&keyword=ATM&key=MyKey",
      type : "GET",
      success:function(data){
         console.log(data);
      }
    })

【讨论】：

快速提醒：该 ajax 跨源插件使用 google 代理。因此，您所做的只是将您的数据改组到其他人为您编写的代理。

【解决方案3】：

我也遇到了同样的问题，解决办法是把json封装在这个函数里面

jsonp(

....你的 json ...

)

【讨论】：

你在服务端封装吗？或者有没有办法在客户端完成这个？

【解决方案4】：

该十六进制可能需要用引号括起来并制成字符串。 Javascript 可能不喜欢 # 字符

【讨论】：

基思，感谢您的回复。为了测试，我从文件中删除了 # 符号，使得内容现在是 {"red" : "f00"}，但同样的错误仍然存在。我注意到的一件事是 Response Content-Type 是 text/plain 而不是 application/json。
作为另一个测试，我将文件重命名为颜色（没有扩展名），我得到了完全相同的错误。