Uncaught Syntax Error Unexpected token : , but the server received a valid json object from the server

Question

I am trying to do a GET request to solr search engine using $.ajax() from jQuery. This is the code I am using for doing an ajax call:

$.ajax({
            url : 'http://xxx.xxx.xxx.xxx:port#/solr/mycore/select?indent=on&q=myparam:value&wt=json',
            type: "GET",
            dataType: "jsonp",
            jsonp : "callback",
            success: function(data) {
                console.log("Success", data);
            },
            error: function(data) { alert("Error"); }
        });

So I am getting a valid json object in the response but somehow the browser throws an Uncaught Syntax Error . The actual error is:

Uncaught SyntaxError: Unexpected token :

select?indent=on&q=myparam:value&wt=json&callback=… ....somevalue...

The tricky part is that the response header is text/plain when I checked in the browser. How can I solve this? Please help me...

Answer 1

Colons require encoding in query strings .

Your url should look like this:

http://xxx.xxx.xxx.xxx:port#/solr/mycore/select?indent=on&q=myparam%3Avalue&wt=json

If you're generating the query string dynamically, use encodeURIComponent() to correctly encode special characters.

Answer 2

I got this solved. Actually I had to use jsonpCallback:"mysuccesscallbackfunction" in the ajax call and json.wrf=mysuccesscallbackfunction in the URL. It looks like this now:

$.ajax({
url : 'http://xxx.xxx.xxx.xxx:port#/solr/mycore/select?indent=on&q=myparam:value&wt=json&json.wrf=mysuccesscallbackfunction',
        type: "GET",
        dataType: "jsonp",
        jsonp : "callback",
        jsonpCallback:"mysuccesscallbackfunction",
        success: function(data) {
            console.log("Success", data);
        },
        error: function(data) { alert("Error"); }
    });

and my mysuccesscallbackfunction is:

function mysuccesscallbackfunction(resp) {
        console.log('inside mysuccesscallbackfunction: ', resp );
    }

Now, first it executes whatever is inside mysuccesscallbackfunction and then goes to default success callback. I found it somewhere on web. I would still like to know why it worked now.