1

これは私が最初に使用していたコードで、昨日までは完全に正常に機能していました (気づいたのはそのときですが、実際にいつ機能しなくなったのかはわかりません)。これは先週の初めに機能していたことを知っているので、それから昨日までの間に壊れました。Alpha Anywhere と呼ばれる RAD 内でこのコードを実行していますが、このプログラムの外部 (HTML ページのみ) でテストしましたが、まだ機能しませんでした。バグがあるかどうか、またはこの問題を解決するために私にできることがあるかどうかを誰かが知っていることを願っています. これをfirebugをオンにしてfirefoxで実行したところ、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 日午後 10 時 26 分 (CDT) の時点)。firebug をオンにすると、Google からの応答が得られないことが示されます。ただし、次のコードは、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 リクエストが使用されます。同じ起点ポリシーのために失敗します。

もう 1 つの問題は、一部の外部 API ( Google Maps Directions APIなど) が JSONP を自動的に提供しないことです。サーバーがコールバック パラメータの処理方法を認識していない場合でも、API からの応答は JSONP ではなく JSON になります。返されたコンテンツが正しくフォーマットされていることを確認するために、jsonp.guffa.comのようなプロキシ サーバーを通過できます。

これを使用するには、要求を変更して、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 に答える