Unexpected token colon JSON after jQuery.ajax#get

2018-12-31 16:26发布

问题:

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.

回答1:

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!\"
    });
});


回答2:

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