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

【问题标题】：Jquery jsonp response error - Callback was not calledJquery jsonp响应错误-未调用回调
【发布时间】：2014-02-05 16:04:06
【问题描述】：

我正在尝试从其他域获取一些信息，该域仅允许 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');
};

【问题讨论】：

服务器的响应是什么

标签： javascript json jquery jsonp

【解决方案1】：

您的$.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/

【讨论】：

非常感谢您的帮助！

【解决方案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，看看它到底返回了什么，通过这种方式你可以更好地理解实际发生的事情:)。

【讨论】：

这个答案解决了他的问题，但使问题解决方案非常抽象，并不能帮助其他人将其应用于他们的情况。

【解决方案3】：

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 了解更多信息。

【讨论】：

这里还有一些问题。 JSONP 不能是 POST。 contentType 用于请求，而不是响应（删除它）。 async:false 通常是个坏主意，并且不适用于 JSONP。