问题
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:
- A callback function defined on your site.
- A request to the remote API via tag
- Includes a special param providing the name of your callback function
- The response:
- Is just Javascript
- That consists of:
- A function call, the name of which you specified in the request
- 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