在网页上显示 jsonp 数据

Question

我正在尝试使用 jsonp 显示数据，但由于某种原因它不想显示在网页上。

function test() 
{
    $.ajax(
    {
        url: "http://localhost/api/company",  //web api is hosted on iss 8
        dataType: 'jsonp',
        success: function (data) 
        {
            $("#test").append(data[5].Company);
        }
    });
}

请注意从服务器返回的数据就好了。我通过谷歌浏览器执行测试功能并检查网络选项卡中的响应来测试这一点。

我在这里做错了什么？

Answer 1

我建议您在这里阅读 JSON 和 JSON with Padding (JSONP) 之间的一个很好的解释，以便更好地理解发生了什么： Can anyone explain what JSONP is, in layman terms?

首先是您的调用需要支持 JSONP 的 URL。并非所有的 web 服务、rest 接口等都支持它即使它们生成 JSON。

其次，您需要在 URL 中包含 ?callback=?，以便使用 jquery 中的 JSONP。

你添加 ?callback=?到您的网址，例如：

var url = 'URL?callback=?';
  $.getJSON(url, function(jsonp){
    $("#jsonp-response").html(JSON.stringify(jsonp, null, 2));
  });

您还需要测试实际服务是否支持 JSONP，您可以在浏览器中打开您的网络服务并添加 ?callback=something

http://localhost/api/company?callback=callbackID

如果 API 支持 jsonp，您应该在浏览器中看到如下输出：

callbackID({
    JSON DOCUMENT HERE
});

在下一部分中，我将包含一些链接，以展示什么是标准 JSON 响应以及什么是 JSONP 响应。

使用 Twitter API 的实时示例

当您使用 getJson 发送请求并有 ?callback=? jquery 自动添加回调 id。

网络服务器收到一个请求，例如并用回调名称（本例为“a”）包装数据：

http://search.twitter.com/search.json?since_id=91770779645124609&q=test&callback=a

如果您在没有回调的情况下尝试相同的请求，您只会看到无法跨站点使用的 JSON：

http://search.twitter.com/search.json?since_id=91770779645124609&q=test