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.

enter image description here

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

The server is sending back JSON, not JSONP. That's the problem. — T.J. Crowder
– T.J. Crowder, Commented Sep 29, 2014 at 17:09
stackoverflow.com/questions/17406990/… , stackoverflow.com/a/19166256/2864740 — user2864740
– user2864740, Commented Sep 29, 2014 at 17:11
but then if i use dataType: 'json' browser dosent send the request to that url — Sharif
– Sharif, Commented Sep 29, 2014 at 17:11

T.J. Crowder · Accepted Answer · 2014-09-29 17:22:41Z

6

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.)

edited Sep 29, 2014 at 17:22

answered Sep 29, 2014 at 17:10

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Sharif Over a year ago

this format is nothing to do with ajax jsonp this is how they want to send data ?format=json&username=[username]&api_key=[api key]

T.J. Crowder Over a year ago

@Sharif: Normally, if a service like that has a format query string param, they support multiple formats (JSON, XML, and JSONP are all popular). This one may or may not, but again, since they appear to support CORS, you could use JSON if that's all they offer.

T.J. Crowder Over a year ago

@Sharif: "I've tried with jsonp too but still the same error" Yeah, I'm not sure they do actually support JSONP, just JSON. (That would be odd, but I kicked around with their page a bit and that's what it looks like...) So you'd have to go with the second paragraph of the answer.

Sharif Over a year ago

I've just removed dataType: 'jsonp from code and this error XMLHttpRequest cannot load selectabase.co.uk/api/v1/tps/01452523652/…. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'claims-pro.co.uk' is therefore not allowed access.

T.J. Crowder Over a year ago

@Sharif: Darn, that means they don't support CORS from your origin. If they don't support JSONP and don't support CORS from your origin, you can't query this information client-side. You'll need to query your own server, and have your server query them.

|

Collectives™ on Stack Overflow

JSONP - "Uncaught SyntaxError: Unexpected token"

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related