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：意外的令牌：

如果我点击该JSON文件，我会收到“无法预览”。

编辑：

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

奇怪的是，正确的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数据的请求将导致“无访问控制标头存在”错误。

来自Docs：“这些Web服务使用对特定URL的HTTP请求，将URL参数作为参数传递给服务。通常，这些服务将HTTP请求中的数据作为JSON或XML返回以进行解析和/或处理通过您的申请。“

请参阅Google Maps API Docs

Answer 2

这是一个偷偷摸摸的人，它确实让我有点猜测：

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

可能相关如何我找到了它，所以你可以在下次做到这一点（我在我的控制台中做了所有这些，但在脚本/文件中也能正常工作）：

首先我输入了网址 - ＆gt;没有错误，所以没有奇怪的网址，或其他时髦的东西
然后只是results功能 - ＆gt;仍然没有错误。现在我们在ajax电话中了解它。
将ajax函数输入到我的编辑器中，如下所示：
- 首先全部 - ＆gt;我收到了错误
- 现在只是带有TYPE和URL的AJAX函数 - ＆gt;没有错误
- 将数据类型添加回 - ＆gt;错误。
- 删除了dataType并添加了回调 - ＆gt;没有错误
- 现在我们知道必须是dataType行
将该句子复制到我的编辑器并将字体放大到巨大
- 所有角色看起来都很好，没有时髦的报价。
- 手动重新输入整行（没有复制/过去）并尝试了 - ＆gt;错误
- 现在我们知道它是不正确的密钥或incorect值
打开文档，看看如何拼写（资本T，当然？） - ＆gt;正确
打开文档，查看正确的值 - ＆gt;等等，没有JSONP
更改代码，“jsonp” - ＆gt; “json” - ＆gt;工作代码！

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

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

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

2 个答案: