Question

我使用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中不够精通以确定错误的来源。我的目标是在页面上显示我的数据。

Answer 1

我不确定您的代码没有使用。因为您还没有编写任何错误消息或代码运行时会发生什么。

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

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

请参阅以下屏幕截图。（截图来自Firefox。） Network view for JSONP response

我在下面添加了一个工作的ajax示例。如果你更喜欢jsFiddle，你会找到相同的例子here。

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<pre id='data'></pre>

＆＃13;

使用JSONP与flaskr和javascript

1 个答案: