0

Flaskr を使用して、RESTful API 経由でデータを生成しています。私の呼び出しは次のようになります。

http get localhost:5000/v1.0/dataset dataset_id==f7e7510b3c1c4337be339446ca000d22

次のようなものを返します。

{"sites": "a"}

今、私は自分のウェブアプリでこのデータを取得しようとしています. 最初にクロスドメイン エラーに遭遇しましたが、いくつか読んだ後、jsonp を使用してそのエラーを回避できることがわかりました。ここで見つけたコードを基本的にコピーして、これをまとめました（JavaScriptは初めてです）：

<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script>
        (function($) {
        var url = 'http://localhost:5000/v1.0/dataset?dataset_id=f7e7510b3c1c4337be339446ca000d22&callback=?';
        $.ajax({
           type: 'GET',
            url: url,
            async: false,
            jsonpCallback: 'jsonCallback',
            contentType: "application/json",
            dataType: 'jsonp',
            success: function(json) {
               console.dir(json.sites);
            },
            error: function(e) {
               console.log(e.message);
              $('#data').html('the error was thrown');
            }
        });

        })(jQuery); 
    </script>
</head>
<body>
    <div id = 'data'></div>
    <p> place holder </p>
</body>

それに応じて、私のpython応答を次のように変更しました。

"jsonCallback({\"sites\":\"a\"});"

これが役立つ場合、フラスコの戻り行は次のとおりです。

 return callback_function + '({"sites":"a"});'

問題の Python 側は良好であると確信していますが、エラーの原因を特定するのに十分なほど JS に精通していません。私の目標は、自分のデータをページに表示することです。

4

1 に答える 1

0

あなたのコードで何が機能していないのかわかりません。エラー メッセージや、コードの実行時に何が起こるかを記述していないためです。

次のスクリプトは、JSONP リクエストをhttp://jsonplaceholder.typicode.com/users/1/todosサービスに送信し、1 つの todo アイテムを返します。これは、データを返すサービスを提供するためだけに使用しました。

ブラウザで開発者コンソールにアクセスして残りのサービスへのリクエストをクリックすると、レスポンスの下に jQuery が JSON にコールバックを追加していることがわかるため、URL にコールバックを追加する必要はありません。

次のスクリーンショットを参照してください。(スクリーンショットは Firefox のものです。)JSONP 応答のネットワーク ビュー

以下に実際の ajax の例を追加しました。jsFiddle を好む場合は、ここで同じ例を見つけることができます。

(function ($) {
    //var url = 'http://localhost:5000/v1.0/dataset?dataset_id=f7e7510b3c1c4337be339446ca000d22';
    var url = 'http://jsonplaceholder.typicode.com/todos/1'; // dummy url

    var jsonCallback = function (data) {
        console.log(data);
        $('#data').html(JSON.stringify(data, null, 2));
    };

    $.ajax({
        type: 'GET',
        url: url,
        contentType: "application/json",
        dataType: 'jsonp'
    }).done(jsonCallback)
    .fail(function (xhr) {
        alert("error" + xhr.responseText);
    });

})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<pre id='data'></pre>

于 2014-11-23T22:26:03.710 に答える