ajax - jQuery跨域AJAX引用错误

Question

我一直在尝试通过在 API 上执行跨域 AJAX 请求来利用世界银行 API。如其 developer page 上所列，基本的调用语法是:

http://api.worldbank.org/countries/all/indicators/SP.POP.TOTL?format=jsonP&prefix=Getdata Note: For JsonP format, 'prefix' parameter needs to be specified.

以下是我在代码中使用的精简版本:

$.ajax({
            url:'http://api.worldbank.org/countries/indicators/'+req.indicator+'?
                 format=jsonP',
            dataType: 'jsonP',
            jsonp : "prefix",
            success : function(res){

            console.log("Success");
            console.log(res)
            var count = res[0].total;

        if(requestdata['per_page'] == 1){

                request(req, count);
            }
            else{
                var grid = formatResponse(res);
            }
        },
        error : function(xhr, status, error){
            console.log("Error");
            console.log(xhr.statusText);
            console.log(xhr.responseText);
            console.log(xhr.status);
            console.log(error);
        }
    })

但是，我每次获取样本指标时都会遇到此错误，例如SP.DYN.CDRT.IN:

Uncaught ReferenceError: jquery17209248960050754249_1390249074104 is not defined

如果有帮助，控制台输出为:

Error
success
*undefined*
200
Error {}

我猜上面的引用是针对 jQuery 调用中使用的匿名回调。我不知道为什么它不起作用。有什么想法吗？

Answer 1

问题出在您正在调用的 API 上。他们错误创建 JSONP 响应。

jQuery 正在传递回调名称 jQuery123456_7890，但 API 正在尝试调用 jquery123456_7890。 JavaScript 中的函数区分大小写。 API错误地将函数名称转换为全部小写，不知道为什么。

您需要通过告诉 jQuery 使用全小写的回调名称来解决此问题。这就是 jsonpCallback 参数的用途。

$.ajax({
    url: 'http://api.worldbank.org/countries/indicators/'+req.indicator+'?format=jsonP',
    dataType: 'jsonp',
    jsonp: "prefix",
    jsonpCallback: "jquery_"+(new Date).getTime(),
    success: function(res){
        console.log("Success");
        console.log(res)
        var count = res[0].total;

        if(requestdata['per_page'] == 1){
            request(req, count);
        }
        else{
            var grid = formatResponse(res);
        }
    },
    error: function(xhr, status, error){
        console.log("Error");
        console.log(xhr.statusText);
        console.log(xhr.responseText);
        console.log(xhr.status);
        console.log(error);
    }
})