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

人走茶凉 提交于 2019-12-24 13:20:11

问题


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){

        }
    });

回答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')
    }
});



回答2:


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',



回答3:


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



来源:https://stackoverflow.com/questions/29243362/jquery-jsonp-return-syntax-error-even-when-the-response-is-json

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!