Using JSONP with flaskr and javascript

Question

I'm using Flaskr to generate data via a RESTful API. My call looks like:

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

and returns something like:

{"sites": "a"}

Now I'm tring to fetch this data with my web app. I first ran into a cross-domain error, but after some reading, found out that I could by-pass that error by using jsonp. Basically copying a piece of code I found here, I put this together (I'm new to 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>

and accordingly changed my python response to look like:

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

If this helps, my flaskr return line is the following:

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

I'm fairly confident my python side of the problem is good, but I'm not well versed enough in JS to determine where the error is coming from. My goal is to simply display my data on the page.

Answer 1

I'm not sure what's not working with your code. Because you haven't written any error message or what happens when your code runs.

Any way the following script does a JSONP request to http://jsonplaceholder.typicode.com/users/1/todos service and returns one todo item. I have used this only to have a service that returns some data.

If you are going to the developer console in your browser to network and click on the request to the rest service you'll see under response that jQuery is adding a callback to the JSON so you don't need to add it in your URL.

See the following screenshot. (The screenshot is from Firefox.) JSONP响应的网络视图

I have added a working ajax example below. If you prefer jsFiddle, you'll find the same example 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>

Using JSONP with flaskr and javascript

Question

1 answers

solution1
0 2014-11-23 22:26:03

Using JSONP with flaskr and javascript

Question

1 answers

solution1 0 2014-11-23 22:26:03

solution1
0 2014-11-23 22:26:03