Chrome 检测到意外的令牌“：”，即使它不存在

Question

我尝试使用此 jQuery 代码从 google distancematrix API 获取 JSON 数据：

<script type="text/javascript">
    $(document).ready(function(){
        url = "https://maps.googleapis.com/maps/api/distancematrix/json?units=imperial&origins=Washington,DC&destinations=New+York+City,NY&key=AIzaSyC1YPi3w46cOyrkUa8s0vR9QHzeoQCoum4";
        $.ajax({
          type: "GET",
          url: url,
          dataType: "json",
          jsonpCallback: "results"
        })

        function results(data) {
            console.log("data" + data);
        } 
    });
</script>

如果我查看浏览器 (Google Chrome) 的控制台，我会收到以下错误消息：

Uncaught SyntaxError: Unexpected token :

如果我点击那个 JSON 文件，我会得到“Nothing to preview”。

编辑：

我在我的网络标签中看到了这个回复：

奇怪的是，正确的 JSON 响应被发送到我的浏览器：

Answer 1

我认为您最终仍会遇到 CORS 问题。我建议使用 Google API 的文档以不同的方式处理它。它相当简单，为您提供更多选择并且效果更好：

(function($){

function init(){
var origin = 'Greenwich, England';
var destination = 'Stockholm, Sweden';

var service = new google.maps.DistanceMatrixService();
service.getDistanceMatrix(
  {
    origins: [origin],
    destinations: [destination],
    travelMode: 'DRIVING'
  }, callback);

function callback(response, status) {
  // See Parsing the Results for
  // the basics of a callback function.
	
	console.log(response);
}
};
	
$(window).ready(function(){
	init();
});
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=yourkey">
</script>

小提琴working fiddle without key

编辑

Google 的回复将在JSON 或XML 中。要获得JSONP 响应，Google 需要为您的端点支持该响应，但它不支持。拥有 API 密钥似乎无法解决 CORS 问题，这意味着对 JSON 数据的请求将导致“没有访问控制标头存在”错误。

From Docs: “这些网络服务使用对特定 URL 的 HTTP 请求，将 URL 参数作为参数传递给服务。通常，这些服务在 HTTP 请求中以 JSON 或 XML 的形式返回数据以进行解析和/或处理由您的应用程序。”

见Google Maps API Docs

Answer 2

这是一个偷偷摸摸的，它确实让我猜到了一些：

//Change this:
dataType: "jsonp",
// to this:
dataType: "json",

可能是相关的如何我找到了它，所以你下次可以做（我在控制台中做了所有这些，但在脚本/文件中也可以):

• 首先我只是输入了网址 -> 没有错误，所以没有奇怪的网址或其他时髦的东西
• 然后只是 results 函数 -> 仍然没有错误。现在我们知道它在 ajax 调用中了。
• 将 ajax 函数输入到我的编辑器中，如下所示：
  • 首先是 -> 我得到了错误
  • 现在只是带有 TYPE 和 URL 的 AJAX 函数 -> 没有错误
  • 重新添加了 dataType -> 错误。
  • 删除数据类型并添加回调 -> 没有错误
  • 现在我们知道它必须是 dataType 行
• 将那句话复制到我的编辑器并将字体放大到大
  • 所有字符看起来都很好，没有时髦的引号。
  • 手动重新输入整行（没有复制/过去）并尝试 -> 错误
  • 现在我们知道它要么是错误的键，要么是不正确的值
• 打开文档，看看如何拼写（大写 T，确定吗？）-> 正确
• 打开文档，查看正确的值 -> 等等，没有 JSONP
• 更改代码，“jsonp”->“json”->工作代码！

跨域“json”请求转换为“jsonp”

所以 jquery 在内部为你做这件事。