显示 JSON 不起作用答案

【问题标题】：Displaying JSON won't work显示 JSON 不起作用
【发布时间】：2012-08-10 13:54:48
【问题描述】：

$(document).ready(function(){
var url='http://api.worldbank.org/topic/4?per_page=10&format=json&callback=?';
var query;
  $('button').click(function(){
    $.getJSON(url,function(json){
      $.each(json.results,function(i,data){
          window.alert("found");
         $("#results").append('<p>'+data.value+'</p>');
      });
    });
  });
});

我想连接到世界银行的 opendata，但是当我按下按钮时，什么也没有发生。我已经使用 twitter API 尝试了相同的脚本，然后它确实起作用了。原始链接没有 &callback=?但我不得不添加它，因为我遇到了错误。

提前致谢！

【问题讨论】：

从响应中可以看出，服务器没有返回JSONP，所以不能用Ajax访问。也许他们的 API 使用了与 callback 不同的关键字，您应该查看他们的文档。
你已经加入了getJson.js，但我很惊讶它在他们的网站上是如何工作的。
不确定这是否有帮助，但在从url 中取出callback=? 参数时，我在控制台中收到如下错误：XMLHttpRequest cannot load http://api.worldbank.org/topic/4?per_page=10&format=json. Origin http://fiddle.jshell.net is not allowed by Access-Control-Allow-Origin.
您可能想阅读以下内容：stackoverflow.com/questions/3506208/jquery-ajax-cross-domain

标签： javascript html json jsonp

【解决方案1】：

如果 URL 包含回调属性，getJSON 方法将进行 JSONP 调用。

“如果 URL 包含字符串“callback=?”（或类似的，定义由服务器端 API 处理），请求被视为 JSONP。”

参考：http://api.jquery.com/jQuery.getJSON/

请求正常，数据到达浏览器，但由于响应是JSON而不是JSONP，数据只是被丢弃，不会调用成功回调方法。

我尝试将URL中的format=json改成format=jsonp，但是响应是错误信息：

<fault>
        <faultstring>Fault raised in a policy</faultstring>
        <detail>
            <errorcode>31326</errorcode>
                <trace>
                    Fault Name: JSONP Bad Request
                    Error Type: MessageRouter
                    Description: Fault raised in a policy
                    Service: worldbank
                    Endpoint: target
                    Operation (Target):defaultOperation
                    FlowTransitionState : Target_Request_User_Error
                    Policy : EnforceMediationOnRequestPolicy
                    RaiseFaultAssertion
                </trace>
        </detail>
</fault>

您必须向您的 API 提供商咨询如何发出 JSONP 请求而不是 JSON 请求。

编辑：

正如 Jimmy Oliger 所说，API 使用 prefix 属性而不是 callback。我试过这个，jQuery实际上使用了那个属性，并且调用了成功回调。

响应是一个数组，其中第一项是分页信息，第二项是包含数据的数组，所以循环json[1]显示数据：

演示：http://jsfiddle.net/Guffa/3JRU6/4/

var url = 'http://api.worldbank.org/topic/4?per_page=10&format=jsonp&prefix=?';
var query;
$('button').click(function() {
    $.getJSON(url, function(json) {
        $.each(json[1], function(i, data) {
            $("#results").append('<p>' + data.value + '</p>');
        });
    });
});

【讨论】：

【解决方案2】：

Wordbank API 不使用callback 属性将响应输出为JSONP，您必须在URL 末尾添加format=jsonP&prefix=? 才能使其正常工作。

您可以找到有关“请求格式”here 的更多信息。

var url = 'http://api.worldbank.org/topic/4?per_page=10&format=jsonP&prefix=?';

$.getJSON(url, function(data) {
  console.log(data);
});

【讨论】：