Jquery ajax response says "Unexpected token ':'" (using jsonp as datatype)

Question

I have a demo webserver written in Python Flask and I'm making ajax call to this server through jquery using jsonp. The url returns json as response but script is unable to parse it as json. The error says Unexpected token ":". Below is the code for webserver and ajax call and I've also commented the line where I'm getting the error.

from flask import Flask, jsonify, render_template
    app = Flask(__name__)


@app.route("/")
def index():
    html = (
        """<button type="button" id="button_1">Click Me !</button>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script type="text/javascript">
            $('#button_1').click(function() {
                var url = 'http://127.0.0.1:5000/url';
                alert(url);
                $.ajax({
                     url: url,
                     type: 'GET',
                     dataType: 'jsonp',
                     jsonpCallback: 'processJSONPResponse',
                     contentType: "application/json; charset=utf-8",
                     complete: function(data, status, jqXHR) {
                         console.log(data);
                     },
                     error: function(xhr, ajaxOptions, thrownError) {
                         console.log(xhr.responseText);
                     }
                });
            });
        </script>"""
    )
    return html


@app.route("/url")
def get_urls():
    response = {
        "urls": { # for the ajax call, I get an error as Unexpected token ":".
            "url1": "/api/repos/url1", 
            "url2": "/api/repos/url2", 
            "url3": "/api/repos/url3"
        }
    }
    return jsonify(response)


if __name__ == "__main__":
    app.run(debug=True)

I'm quite new to javascript (jquery) and unable to figure out the issue. Any help would be appreciated.

whats the response you are getting for that ajax call? – Ayyappan Sekar Feb 06 '18 at 09:22 — Ayyappan Sekar, Feb 06 '18 at 09:22

akrn · Answer 1 · 2018-02-06T11:59:15.073

Are you sure you need JSONP, not just JSON?

JSONP is used to load JSON data when you're not allowed to use XHR (due to same origin policy, e.g. when you make request to other domain name and it doesn't provide CORS headers) with a workaround based on injecting <script> tag.

If you need just JSON, then change your dataType: 'jsonp' to dataType: 'json'

For JSONP, your server should return not a JSON string but JavaScript containing function call with your JSON as an argument:

processJSONPResponse({
    "url1": "/api/repos/url1", 
    "url2": "/api/repos/url2", 
    "url3": "/api/repos/url3"
})

This script will be inserted as a <script> tag by jQuery, and once inserted, processJSONPResponse() function will be executed with your data. Since you defined callback name when initiated your JSONP request (jsonpCallback: 'processJSONPResponse'), jQuery will create this callback function for you and once <script> is evaluated, complete function will be called with your data.

Jquery ajax response says "Unexpected token ':'" (using jsonp as datatype)

1 Answers1