jquery + jsonp return syntax error even when the response is json

Question

Why does this return a syntax error?

http://jsfiddle.net/syng17fv/

jquery.jsonp https://github.com/jaubourg/jquery-jsonp

response http://cvrapi.dk/api?search=test&country=dk

$.jsonp({
    url : 'http://cvrapi.dk/api?search=test&country=dk',
    success : function(json){
        console.log('success')
    },
    error : function(){
        console.log('err')
    }
});

update

This works

$.ajax({
        type : 'GET',
        dataType : 'jsonp',
        url : '//cvrapi.dk/api?search=test&country=dk',
        success : function(res){

        }
    });

Answer 1

You need to add a callback parameter. I'll explain exactly why below.

A JSONP call doesn't work without a callback. The data is loaded in a script tag, and if the code is not in a form of a method call, the result would just be an object that was discarded, and the success callback method would never be called.

Why does [not using a callback] return a syntax error?

This is how your ajax response essentially looks like without the callback (e.g. http://cvrapi.dk/api?search=test&country=dk):

<script> 
{"vat":11618405,"name":"TESTRUP ... (snip)
</script>

Of course there is a syntax error in this JavaScript! :)

Here is the ajax response with the callback (e.g. http://cvrapi.dk/api?search=test&country=dk&callback=callbackFunc):

<script> 
callbackFunc({"vat":11618405,"name":"TESTR ... (snip)
</script>

Now that's valid JavaScript. The $.jsonp with call callbackFunc() in this example, and everything is right with the world.

---

The core elements of JSONP, or "JSON with padding", are as such:

1. A callback function defined on your site.
2. A request to the remote API via tag
   • Includes a special param providing the name of your callback function
3. The response:
   • Is just Javascript
   • That consists of:
     1. A function call, the name of which you specified in the request
     2. The argument being the JSON data of interest
   • Gets executed immediately, as if it were called from your own domain

This callback arrangement between you and the server, combined with avoiding same-origin restrictions, is really the whole trick to JSONP

REF: So how does JSONP really work?, and Wikipedia: JSONP

---

Change your json code like this. Works like a charm. Notice the "callback" parameter added. JSONP expects this. Here is your edited JSFiddle: http://jsfiddle.net/Drakes/syng17fv/2/

REF: https://github.com/jaubourg/jquery-jsonp/blob/master/doc/TipsAndTricks.md

$.jsonp({
    url : '//cvrapi.dk/api?search=test&country=dk&callback=?',
    success : function(json){
        console.log('success')
    },
    error : function(){
        console.log('err')
    }
});

Answer 2

After analysing the plugin, url = url.replace( /=\?(&|$)/ , "=" + successCallbackName + "$1" ); is not working so fine enough to make the jsonp callback so add some function to make it work, or try to change the regex to add the callback to the url.

Try replacing the url = url.replace( /=\?(&|$)/ , "=" + successCallbackName + "$1" ); in the plugin with the below code.

function addCallback(paramName, paramValue, url) {

    if (url.indexOf(paramName + "=") >= 0) {
        var prefix = url.substring(0, url.indexOf(paramName));
        var suffix = url.substring(url.indexOf(paramName));
        suffix = suffix.substring(suffix.indexOf("=") + 1);
        suffix = (suffix.indexOf("&") >= 0) ? suffix.substring(suffix.indexOf("&")) : "";
        url = prefix + paramName + "=" + paramValue + suffix;
    } else {
        if (url.indexOf("?") < 0)
        url += "?" + paramName + "=" + paramValue;
        else
        url += "&" + paramName + "=" + paramValue;
    }
        return url;

}

url = addCallback('callback', successCallbackName, url);

Updated fiddle

Answer 3

Seems callback option doesn't work. Just add callback parameter to url with default value (_jqjsp)

url : '//cvrapi.dk/api?search=test&country=dk&callback=_jqjsp',