javascript - Ajax查询JSON数据不返回数据

Question

我正在尝试使用世界银行的 API 来获取一些数据。 This is how to query their database.基本上要查询一个国家/地区的信息，我需要访问以下网址:

http://api.worldbank.org/countries/"alpha2Code of the country"

在我的代码 ( Link to CodePen code. ) 中，我使用先前查询中的 alpha2Code 添加到世界银行查询的 URL。方法如下:

getDetails(alpha2Code) {
  this.load('http://api.worldbank.org/countries/'+alpha2Code)
    .then((countryDetails) => {
      this.generateOverlay(countryDetails);
    });
},

load() 方法定义如下:

load(url, type = 'json') {
  return $.ajax({
    dataType: type,
    url: url,
  });
},

根据世界银行的基本调用格式，我需要添加

format=json

为了接收 JSON 格式的响应。不知何故，我认为它实际上没有从世界银行获得任何东西。

对世界银行的查询应该为我提供详细信息，以便在点击后将其放入覆盖国旗的覆盖层中。

提前感谢您的帮助!

Answer 1

您共享的 CodePen 的一个问题可能是也可能不是您网站的问题，即 CodePen 演示是通过 HTTPS 加载的，但您正在请求不安全的资源 (HTTP)。浏览器不喜欢这样，通常会阻止它。

不幸的是，您不能仅仅将请求更改为 HTTPS，因为 WorldBank API 没有整理其证书，因此这些请求也会被浏览器阻止。一种解决方案是通过 HTTP 加载您的网站；但是，如果您的页面包含任何用户敏感信息，这显然是不可取的。

更好的方法是使用自己的后端服务器作为代理。您可以在服务器上设置自己的 API，通过 HTTP 查询 WorldBank API，然后通过 HTTPS 响应您的请求。当然，这假设您可以控制后端，但情况并非总是如此。