1

这是我最初使用的代码，并且直到昨天都运行良好（这是我注意到它的时候，但我不确定它何时确实停止工作）。我知道这在上周初起作用，所以从那时到昨天之间的某个时候它坏了。我在名为 Alpha Anywhere 的 RAD 中运行此代码，但已在此程序之外（仅在 HTML 页面中）对其进行了测试，但仍然无法正常工作。希望有人知道是否存在错误，或者我是否可以采取一些措施来解决此问题。我在 firefox 中运行了这个并打开了 firebug，这就是我看到错误的地方，让我知道 JSON 没有被检索到。

var $jq = jQuery.noConflict();

$jq.getJSON('http://maps.googleapis.com/maps/api/directions/json?origin=Toronto&destination=Montreal&sensor=false',function(results){

    // I have code in here to calculate miles driven per state 
    // (as in the above code origin and destination would be filled 
    // with variables but I went with this basic call because even this doesn't work).

});

以下代码在 Firefox 或 chrome 中运行时不起作用（截至目前 2013 年 11 月 11 日 CDT 晚上 10:26）。上面有萤火虫表明我没有得到谷歌的回应。但是，以下代码在 Mac OSX 10.9 上的 safari 7.0.x 中运行时会响应。

<!DOCTYPE html>
<html>
    <head>
        <script src="http://api.jquery.com/jquery-wp-content/themes/jquery/js/jquery-1.9.1.min.js"></script>
        <script>
            function getData() {
                var url = 'http://maps.googleapis.com/maps/api/directions/json?origin=Huntsville,AL&destination=Atalanta,GA&sensor=false';
                var $jq = jQuery.noConflict();
                $jq.getJSON(url, function (results) {
                    alert(results.routes[0].legs[0].distance.value);
                });
            }
        </script>
        <title>jQuery Debug of Google API</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
    </head>
    <body>
        <button onclick="getData();">click</button>
    </body>
</html>
4

1 回答 1

1

这里有几个问题：

首先，从jsonp 解释：

您可能知道您不能直接从另一个域加载数据文件。这是一个由来已久的安全问题，通常通过 API、REST 等共享数据来解决。但是有一些方法可以解决这个问题...... [例如] JSONP

要在 jQuery 中执行此操作：

这表明我们要使用JSONP. 删除它，将使用一个普通的 JSON 请求；由于相同的原产地政策，这将失败。

另一个问题是某些外部 API（如Google Maps Directions API）不会自动提供 JSONP。如果服务器不知道如何处理回调参数，那么来自 API 的响应仍然是 JSON，而不是 JSONP。为了确保返回的内容格式正确，可以通过jsonp.guffa.com之类的代理服务器

要使用它，请将请求更改为 Where you have replace YourEncodedURI与编码的请求 url 字符串。http://jsonp.guffa.com/Proxy.ashx?url=YourEncodedURI

把它们放在一起：

var mapsUrl    = 'http://maps.googleapis.com/maps/api/directions/json' + 
                 '?origin=Toronto&destination=Montreal&sensor=false';
var encodedUrl = encodeURIComponent(mapsUrl);
var proxyUrl   = 'http://jsonp.guffa.com/Proxy.ashx?url=' + encodedUrl;

$.ajax({
    url: proxyUrl,
    dataType: 'jsonp',
    cache: false,
    success: function (data) {
        console.log(data);
    }
});

jsFiddle 中的工作演示

延伸阅读：

于 2013-11-05T16:38:27.320 回答