JSONP - "Uncaught SyntaxError: Unexpected token"

Question

before I explain my issue I would like to mention that I'm a naive on jsonp. This is actually my very first attempt to work with JSONP.

Im using jquery ajax call to pullback data from a website.

my jquery code is below

$.fn.checkTPS = function(){

    return this.each(function(){
        var interval;

        $(this).on('keyup', function() {
            var api_key = 'asdfasfsadfsadfsad';
            var format = 'json';
            var username = '[email protected]';

            var self = $(this);
            var selfValue;
            var feedback = $('.tps-feedback');

            if(interval === undefined){

                interval = setInterval(function(){

                    if(selfValue !== self.val()) {

                        selfValue = self.val();

                        if (selfValue.length > 9){
                            $.ajax({
                                url: 'https://www.selectabase.co.uk/api/v1/tps/' + selfValue + '/',
                                type: 'get',
                                dataType: 'jsonp',
                                data: {
                                    format: format,
                                    username: username,
                                    api_key: api_key
                                },
                                success: function(data) {
                                    console.log(data);
                                },
                                error: function() {

                                },
                                jsonp: 'jsonp'
                            });
                        }
                    }
                },3000);
            }
        });
    });
};

I want to accommodate a service from selectabase.co.uk, according to them this is how I should use the service https://www.selectabase.co.uk/api/v1/tps/[number]/?format=json&username=[username]&api_key=[api key]

when I send request using ajax I get this error Uncaught SyntaxError: Unexpected token : and when clicked this opens up {"ctps": false, "number": "1452500705", "resource_uri": "/api/v1/tps/01452500705/", "tps": false} by the way this I want but don't know what's this error is unexpected token :

I've copied the following link from inspect element tab (you can see the image below) I think this is the call that has been generated by json https://www.selectabase.co.uk/api/v1/tps/01452500705/?jsonp=jQuery17102731868715648129_14120077325500&format=json&username=dame40example.co.uk&api_key=asdfasfsadfsadfsad&_=14120077325500

I copied the link below from inspect element > source tab in chrome.. I think I should add an image to describe properly where this json data and link I've copied from.

I hope I've manage to convey my message across... please help if you have any Idea what do i need to add... Regards

Answer 1

The format=json in your query string should probably be format=jsonp. The server is replying with JSON, but you're expecting a JSONP response. But I don't know that they support format=jsonp, it's just a guess.

Alternately, if that server supports CORS and allows requests from your origin, you could handle JSON instead (just remove dataType: "json" from your ajax call). Beware that that would require that the user be using a browser that properly supports CORS, which IE8 and IE9 don't. (They support CORS, but not via the normal XMLHttpRequest object, and this is a browser inconsistency that jQuery doesn't smooth over for you. If you search, though, you can find "plugins" or similar that will handle it.)