将 JSONP 与 flaskr 和 javascript 一起使用答案

【问题标题】：Using JSONP with flaskr and javascript将 JSONP 与 flaskr 和 javascript 一起使用
【发布时间】：2015-01-21 12:39:21
【问题描述】：

我正在使用 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 的了解不够，无法确定错误来自哪里。我的目标是在页面上简单地显示我的数据。

【问题讨论】：

标签： javascript flask cross-domain jsonp flask-restful

【解决方案1】：

我不确定您的代码有什么问题。因为你没有写任何错误信息或者你的代码运行时会发生什么。

以下脚本以任何方式向http://jsonplaceholder.typicode.com/users/1/todos 服务发出 JSONP 请求并返回一个待办事项。我只使用它来提供返回一些数据的服务。

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

请参阅以下屏幕截图。（截图来自火狐）

我在下面添加了一个有效的 ajax 示例。如果您更喜欢 jsFiddle，您会找到相同的示例 here。

(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>

【讨论】：

感谢您的彻底回复。我使用了您在我的 URL 中提供的示例，但我得到了“SyntaxError: missing ; before statement”和一个指向我的数据的链接。我的数据是有效的 json。但是，如果我将响应更改为 jsonp，那么我就没有错误，调用通过但没有响应...