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提供服务并返回一个待办事项。我只使用它来提供返回一些数据的服务。

如果您要在浏览器中访问开发人员控制台进行联网并单击对其余服务的请求，您将在响应下看到 jQuery 正在向 JSON 添加回调，因此您无需在 URL 中添加它。

请参阅以下屏幕截图。（截图来自火狐。）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 回答