使用 JSONP 从另一台服务器获取 JSON 数据答案

【问题标题】：Using JSONP to get JSON data from another server使用 JSONP 从另一台服务器获取 JSON 数据
【发布时间】：2014-03-10 01:14:30
【问题描述】：

我正在尝试从公司托管的网站收集 JSON 数据。我不在同一个域上，所以我不能访问它。从标题来看，他们似乎也不使用 CORS。所以我尝试使用 JSONP 来解析数据，但它似乎不起作用。我尝试过 $.getJSON 和 $.ajax，但它们会抛出错误并且不会调用该函数。到目前为止，这是我的解决方案，在来自服务器的响应中，它仍然没有将数据包装在 getResults 中。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<script type="text/javascript" src="jquery/js/jquery-1.9.0.min.js"></script>

<script>
function getResults(data) {
    console.log(data[0].name);
}
</script>
<script type='text/javascript' src='https://solstice.applauncher.com/external/contacts.json?callback=getResults'></script>

我对 HTML、JavaScript 和 jQuery 还很陌生，所以我真的很困惑为什么响应被包装在函数中而控制台日志不起作用。任何帮助，将不胜感激。

【问题讨论】：

给出的url没有调用任何函数，只是返回数据。它不适用于 JSONP 调用。

标签： javascript jquery html json jsonp

【解决方案1】：

JSONP 是一种技术，您可以将请求放入脚本标记 URL（任何域都允许），然后在该 URL 中传递一个参数，该参数指示您希望返回的结果脚本的函数名称调用并传递您的数据。在这种情况下，您似乎指定回调函数名为 getResults。

要使 JSONP 正常工作，您向其发送请求的服务器必须特别支持它，因为它需要特定类型的响应格式，并且它允许来自任何浏览器的任何域发出请求，这并不是所有网站都想要的启用。

因此，您首先需要了解的是，您请求数据的服务器是否支持 JSONP，如果支持，请确保您准确了解它将如何格式化响应以及它如何期待回调要指定的函数（常见约定是使用callback=xxx URL 参数，但不必这样做。

如果您要从中获取数据的服务器不支持 JSONP，那么您根本无法使用 JSONP 从中获取数据。如果它不支持其他一些跨域请求策略，那么您将无法通过浏览器网页从中获取数据，并且必须从浏览器以外的其他东西（如另一台服务器）发出请求。

【讨论】：

如何知道服务器是否支持 JSONP？
@user3299416 - 您必须查看该站点 API 的文档以了解它支持的内容。您可能还必须以某种方式发出请求，以便它知道您要求它执行 JSONP。

【解决方案2】：

JSONP 是服务器必须实现的一种方法。

如果您确定服务器接受并理解 JSONP，那么您用于传递回调名称的参数可能不是callback。如果他们有文档，请查看他们的文档。

否则，您根本无法从浏览器中获取 json 数据。

【讨论】：

【解决方案3】：

来自here的实时样本：

JSONP - 带填充的 JSON，即。封装在回调中的 javascript 对象，在我们的例子中是 jsonCallback

这是文件内容：

jsonCallback(
    {
        "sites":
        [
            {
                "siteName": "JQUERY4U",
                "domainName": "http://www.jquery4u.com",
                "description": "#1 jQuery Blog for your Daily News, Plugins, Tuts/Tips &amp; Code Snippets."
            },
            {
                "siteName": "BLOGOOLA",
                "domainName": "http://www.blogoola.com",
                "description": "Expose your blog to millions and increase your audience."
            },
            {
                "siteName": "PHPSCRIPTS4U",
                "domainName": "http://www.phpscripts4u.com",
                "description": "The Blog of Enthusiastic PHP Scripters"
            }
        ]
    }
);

检索文件的代码：

(function($) {
var url = 'http://www.jquery4u.com/scripts/jquery4u-sites.json?callback=?';

$.ajax({
   type: 'GET',
    url: url,
    async: false,
    jsonpCallback: 'jsonCallback', <-- callback here
    contentType: "application/json",
    dataType: 'jsonp',
    success: function(json) {
       console.dir(json.sites);
    },
    error: function(e) {
       console.log(e.message);
    }
});

})(jQuery);

【讨论】：

我收到此错误：Uncaught SyntaxError: Unexpected token :

【解决方案4】：

您可以使用多种方法，但最方便的两种方法是 AJAX 调用或使用 jQuery 的 getJSON() 方法

使用 AJAX 调用

$(document).ready(function() {
  $(".btn").click(function() {
    $.ajax({type: "get",
            url: "http://api.forismatic.com/api/1.0/",
            data: {method: "getQuote",format: "jsonp",lang: "en"},
            dataType: "jsonp",
            jsonp: "jsonp",
            jsonpCallback: "myJsonMethod"
    }); 
  });
});
function myJsonMethod(response){
  console.log (response);
}

在上述方法中，response Object 拥有来自 API 调用的所有 JSON 数据。

使用 getJSON()

$(document).ready(function() {
  $(".btn").click(function() {
    $.getJSON("http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=myJsonMethod&?callback=?");
  });
});
function myJsonMethod(response){
  console.log (response);
}

在上述方法中也会发生同样的事情。

注意 --> JSONP 采用要发送响应的回调函数的名称。

【讨论】：

在您的第一个示例“使用 Ajax 调用”中，您使用类型：“POST”。 JSONP 仅用于 GET 请求。 JSONP 的作用类似于