Organizational Research By

Surprising Reserch Topic

unexpected token colon json after jquery ajaxget


unexpected token colon json after jquery ajaxget  using -'javascript,jquery,json,node.js'

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 am having : "Unexpected token :".

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.
    

asked Sep 15, 2015 by MelMangum
0 votes
103 views



Related Hot Questions

2 Answers

0 votes

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!"
    });
});
answered Sep 15, 2015 by Can64R
0 votes

The server is outputting JSON, but your $.ajax request is configured to use JSONP. Change your dataType:

$.ajax({
    ...
    dataType: 'json', // <-- json not jsonp
    ...
});

JSON is not the same as JSONP. JSON is a generic data format, typically using for data transfer, based on JavaScript objects and array syntax. JSONP on the other hand, is a mechanism for circumventing Same Origin Policy, that makes use of the JSON format.

If you want to support JSONP, you will need to observe the callback in the querystring, and output it with your JSON in parenthesis unquoted.

answered Sep 15, 2015 by EdmundMetcal

...