Jquery jsonp响应错误 - 未调用回调

时间:2014-01-16 16:13:21

标签: javascript json jquery jsonp

我正在尝试从其他域获取一些信息,该域只允许jsonp调用 - 其他域名被拒绝。如何获取内容而不是执行?因为我得到了错误的回应。我不需要执行它,我只需要在我的脚本中。在任何格式(响应是json但js不理解它)。 我无法影响该域名,因此无法改变该方面的内容。 这是我的代码:

$.ajax({
    url: url + '?callback=?',
    crossDomain: true,
    type: "POST",
    data: {key: key},
    contentType: "application/json; charset=utf-8;",
    async: false,
    dataType: 'jsonp',
    jsonp: 'callback',
    jsonpCallback: 'jsonpCallback',
    error: function(xhr, status, error) {
        console.log(status + '; ' + error);
    }
});

window.jsonpCallback = function(response) {
    console.log('callback success');
};

3 个答案:

答案 0 :(得分:12)

您的$.ajax电话存在一些问题。

$.ajax({
    url: url + '?callback=?',
    // this is not needed for JSONP.  What this does, is force a local
    // AJAX call to accessed as if it were cross domain
    crossDomain: true,
    // JSONP can only be GET
    type: "POST",
    data: {key: key},
    // contentType is for the request body, it is incorrect here
    contentType: "application/json; charset=utf-8;",
    // This does not work with JSONP, nor should you be using it anyway.
    // It will lock up the browser
    async: false,
    dataType: 'jsonp',
    // This changes the parameter that jQuery will add to the URL
    jsonp: 'callback',
    // This overrides the callback value that jQuery will add to the URL
    // useful to help with caching
    // or if the URL has a hard-coded callback (you need to set jsonp: false)
    jsonpCallback: 'jsonpCallback',
    error: function(xhr, status, error) {
        console.log(status + '; ' + error);
    }
});

你应该像这样打电话给你的网址:

$.ajax({
    url: url,
    data: {key: key},
    dataType: 'jsonp',
    success: function(response) {
        console.log('callback success');
    },
    error: function(xhr, status, error) {
        console.log(status + '; ' + error);
    }
});

JSONP 不是 JSON。 JSONP实际上只是向您的<head>添加脚本标记。响应需要是一个JavaScript文件,其中包含一个以JSON数据作为参数的函数调用。

JSONP是服务器需要支持的东西。如果服务器没有正确响应,则无法使用JSONP。

请阅读文档:http://api.jquery.com/jquery.ajax/

答案 1 :(得分:2)

var url = "https://status.github.com/api/status.json?callback=apiStatus";
$.ajax({
    url: url,
    dataType: 'jsonp',
    jsonpCallback: 'apiStatus',
    success: function (response) {
        console.log('callback success: ', response);
    },
    error: function (xhr, status, error) {
        console.log(status + '; ' + error);
    }
});

试试这段代码。

还可以尝试直接在浏览器中调用此url并查看其确切返回的内容,通过这种方式您可以更好地了解实际情况:)。

答案 2 :(得分:1)

jsonpCallback参数用于指定JSONP响应中函数的名称,而不是代码中函数的名称。你可以删除这个; jQuery将代表您自动处理此问题。

相反,您正在寻找success参数(以检索响应数据)。例如:

$.ajax({
    url: url,
    crossDomain: true,
    type: "POST",
    data: {key: key},
    contentType: "application/json; charset=utf-8;",
    async: false,
    dataType: 'jsonp',
    success: function(data){
        console.log('callback success');
        console.log(data);
    }
    error: function(xhr, status, error) {
        console.log(status + '; ' + error);
    }
});

您还可以删除其他JSONP相关参数,这些参数设置为jQuery默认值。有关详细信息,请参阅jQuery.ajax