Question

我正在尝试使用jsonp从远程服务器获取数据，而且我遇到了一些问题。首先我遇到了身份验证问题，但是（我认为）现在还可以。无论如何，我在尝试看起来像这样的代码时，在firebug上遇到“无效标签”错误：

$(function() {
var url = 'http://lifeloopdev.info/get_events?callback=?';
    $.ajax(url, {  
        dataType: "jsonp",
        data: "offset=0&num_items=10",
        username: 'username',
        password: 'password',
        jsonp: 'successCallback'
    });  
});  

function successCallback(data) {  
    $.each(data.success, function(i,item){
        $("body").append('<h1>' + item.title + '</h1>');
    });
};

我也尝试过没有成功函数（而不是jsonp：'successCallback'）：

success: function(data) {  
        successCallback(data);
    }

我的json文件：

{"success":[{"id":1,"title":"title 1"},{"id":2,"title":"title 2"},{"id":3,"title":"title 3"}]}

似乎ajax函数获取数据但难以解析它或类似的东西。

如果你可以帮助我，我会更高兴，我花了最后4个小时试图找出它没有成功。非常感谢您抽出时间帮助我。

Aviram。

Answer 1

乍一看我错过了一些东西 - 你已经指定了你的JSON文件，我以为你说过你的JSON响应。问题的根源是响应必须的格式为callbackFunctionName(jsonData)。如果它没有填充，那么你将在Firebug中得到invalid label错误，因为jQuery会尝试将响应解释为对函数的调用，但响应中不会有任何函数名。

您对JSONP回调函数的$.ajax()的使用现在稍微不正确，这导致了此问题。分配给jsonp的值表示查询字符串参数的名称 - 这应该与服务器期望的参数名称匹配。在您的情况下，看起来服务器期望参数名称callback而不是successCallback。它不是将在填充的JSON中使用的字符串。 jsonpCallback可以指定此函数的名称 - 如果您要使用命名函数而不是successCallback函数，则应指定success的值。

假设服务器期望名为callback的查询参数中的回调函数名称，则您的代码应为以下之一：

默认情况下，当您未指定callback=?变量时，jQuery将添加jsonp。请注意在此代码段中使用success回调函数。：
```
$(function() {
    var url = 'http://lifeloopdev.info/get_events';
    $.ajax(url, {  
        dataType: "jsonp",
        data: "offset=0&num_items=10",
        username: 'username',
        password: 'password',
        success: function(data){
            $.each(data.success, function(i,item){
                $("body").append('<h1>' + item.title + '</h1>');
            });
        }
    });  
});  
```
jQuery将尝试获取的URL将为http://lifeloopdev.info/get_events?offset=0&num_items=10&callback=jQuery152035532653917078266_4305276802416。请注意，字符串callback是一个查询字符串参数名称，它的值已由jQuery自动生成 - 这将最终调用您的success函数。

回复应如jQuery152035532653917078266_4305276802416({"success":[{"id":1,"title":"title 1"},{"id":2,"title":"title 2"},{"id":3,"title":"title 3"}]})
如果您想使用自定义回调函数名称，请参阅以下代码：
```
$(function() {
    var url = 'http://lifeloopdev.info/get_events';
    $.ajax(url, {  
        dataType: "jsonp",
        data: "offset=0&num_items=10",
        username: 'username',
        password: 'password',
        jsonpCallback: 'successCallback'
    });  
});  

function successCallback(data) {  
    $.each(data.success, function(i,item){
        $("body").append('<h1>' + item.title + '</h1>');
    });
};
```
在这种情况下，jQuery将尝试获取的URL将为http://lifeloopdev.info/get_events?offset=0&num_items=10&callback=successCallback。正确的响应将导致调用名为successCallback的函数。

在这种情况下，响应应该类似于successCallback({"success":[{"id":1,"title":"title 1"},{"id":2,"title":"title 2"},{"id":3,"title":"title 3"}]})

如果您的回调函数查询字符串参数不而不是callback，而是类似cbfunc，则需要将jsonp : 'cbfunc'添加到您的$.ajax()致电。

Answer 2

你实际上是在填充你的json响应服务器端转为jsonp吗？即代替json：

{"success":[{"id":1,"title":"title 1"},{"id":2,"title":"title 2"},{"id":3,"title":"title 3"}]}

你应该回来了

callback({"success":[{"id":1,"title":"title 1"},{"id":2,"title":"title 2"},{"id":3,"title":"title 3"}]});

其中“callback”是传递给服务器的回调查询字符串参数的值。除非您提供jsonpCallback设置，否则Jquery会自动生成此内容。

我也认为你不需要把“？callback =？”在你的URL中，因为我相信jquery会自动添加它。

另外，jsonp：successCallback告诉Jquery要替换？callback =？ with successCallback - 但我认为这不是你真正想要的。你可能想要使用“成功：功能（数据）......”

在ajax and jsonp上仔细阅读jquery文档可能是值得的。

带有jquery和jsonp的“无效标签”（跨域）

2 个答案: