jQuery跨域AJAX参考错误

时间:2014-01-20 20:30:56

标签: ajax jquery

我一直在尝试通过在其API上执行跨域AJAX请求来利用World Bank API。如developer page所列,基本调用语法为:

  

http://api.worldbank.org/countries/all/indicators/SP.POP.TOTL?format=jsonP&prefix=Getdata   注意:对于JsonP格式,需要指定'prefix'参数。

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

$.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

  

未捕获的ReferenceError:未定义jquery17209248960050754249_1390249074104

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

Error
success
*undefined*
200
Error {}

我想上面的参考是针对jQuery调用中使用的匿名回调。 我很无能为什么不工作呢。有什么想法吗?

1 个答案:

答案 0 :(得分:3)

问题在于您正在调用的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);
    }
})