Unexpected token colon JSON after jQuery.ajax#get

Question

I have created a minimalist API on nodejs which return data in JSON format.

But every time I try to make a ajax#get call and pass my API as URL, I will get an error and judging from Chrome, I'm getting a "Unexpected token :" error;

here the server code in nodejs + express:

var http = require( 'http' ), express = require( 'express' ), app = express(), server = http.createServer( app ); app.get( '/', function( req, res ) { console.log( 'req received' ); res.setHeader('Content-Type', 'application/json'); res.end( JSON.stringify({ Name : "Tom", Description : "Hello it's me!" }) ); }); server.listen(3000, function() { console.log( 'Listening on 3000' ); });

The JSON returned from "/" is: {"Name":"Tom","Description":"Hello it's me!"}.

Here is my call from the client js:

$.ajax({ url: findUrl, type: 'get', dataType: 'jsonp', success: function ( data ) { self.name( data.Name ); self.description( data.Description ); }, error: function( jqXHR, textStatus, errorThrown ) { alert(errorThrown); } });

When plotting the error I get: "jQuery111108398571682628244_1403193212453 was not called"

Can someone help me?

I know this question has been asked already but I haven't manage to find a solution which fix my program.

@Andreas : I guess you refer to "jsonp", I changed it to "json". I am now getting "XMLHttpRequest cannot load localhost:3000. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access." how can I fix this ? — K. L.
– K. L., Commented Jun 19, 2014 at 16:09

Jonathan Lonowski · Accepted Answer · 2018-04-07 19:28:33Z

To support JSONP requests, the server will have to include the P, or "Padding," in the response.

jQuery111108398571682628244_1403193212453({"Name":"Tom","Description":"Hello it's me!"})

The syntax error, "Unexpected token :", is because JSONP is parsed as JavaScript, where {...} also represents blocks. It just takes advantage of JSON and JavaScript's similar syntax to define the data being passed to a global function call.

By default, jQuery will include a callback query-string parameter with the name of the function:

var callback = req.query.callback; var data = JSON.stringify({ Name : "Tom", Description : "Hello it's me!" }); if (callback) { res.setHeader('Content-Type', 'text/javascript'); res.end(callback + '(' + data + ')'); } else { res.setHeader('Content-Type', 'application/json'); res.end(data); }

ExpressJS also includes res.jsonp() that already implements this condition:

app.get( '/', function( req, res ) { console.log( 'req received' ); res.jsonp({ Name : "Tom", Description : "Hello it's me!" }); });

The link in your answer to JSONP requests is broken. Please update.

Dan Putman · Accepted Answer · 2014-06-19 16:10:01Z

-3

You want to use dataType: "json" instead of "jsonp"

answered Jun 19, 2014 at 16:10

Dan Putman

485 bronze badges

4 Comments

Mahshid Zeinaly Over a year ago

there are different reasons why you want to use jsonp, one example is to be able to call across different domains

Karl Over a year ago

agreed, jsonp is for CORS, you can't just use json if you need to make a cross domain async request via javascript.

Quentin Over a year ago

JSONP is not for CORS. JSONP is the hack we used before CORS was developed and supported by browsers.

Karl Over a year ago

Thank you for clarifying that's what I meant. JSONP is for when you cannot use CORS.

Collectives™ on Stack Overflow

Unexpected token colon JSON after jQuery.ajax#get

2 Answers 2

1 Comment

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Linked

Related