JavaScript/jQuery：在 CodePen 中设置 IP 地理定位 API

Posted 2023-02-24

【中文标题】JavaScript/jQuery：在 CodePen 中设置 IP 地理定位 API

【英文标题】：JavaScript/jQuery: Setting up IP Geolocation API within CodePen

【发布时间】：2017-12-09 10:50:08

【问题描述】：

我对使用 API 非常陌生，并且很难向 IP Geolocation API 发出 GET 请求。我不确定问题出在我的代码还是与 CodePen 相关的问题（可能是我的代码）。

我直接从IP Geolocation API 页面上列出的示例中获取了 javascript。在看到它在运行后我打算对其进行修改，但我根本无法让它工作。我尝试修改 URL 以同时包含 http:// 和 https://。

JavaScript：

$(document).ready(function() 

  $.getJSON("http://ip-api.com/json/?callback=?", function(data) 
            var table_body = "";
            $.each(data, function(k, v) 
                table_body += "<tr><td>" + k + "</td><td><b>" + v + "</b></td></tr>";
            );
            $("#GeoResults").html(table_body);
        );

);

HTML：

<div class="weather">
  <div class="row title">
    <h1>weather</h2>
  </div>
  <div class="row icon">

  </div>
  <div id = "GeoResults" class="row temp">
    <p class = "city">City here</p>
  </div>
</div>

我的 CodePen 的 URL：https://codepen.io/mattr8/pen/yXEMRM

我正在尝试使用的 API：http://ip-api.com/docs/api:json

【问题讨论】：

希望this会有所帮助

因为 api 使用 http 而 codepen 使用 https，将 url 更改为 https 不起作用，因为它们不会通过 https 公开服务

【参考方案1】：

Codepen 不想使用 ip-api.com 因为 https。因为 codepen 是通过 https 服务的，所以它将阻止任何不是 https 的请求。如果你去http://ip-api.com/json/?callback=？您将看到您尝试访问的信息。如果你去https://ip-api.com/json/?callback=？你会收到一个错误。

他们链接到的 jsbin 示例不使用 https，因此可以正常工作。

因此，要解决您的问题，请在服务或您自己的机器上使用 http 而不是 https 请求创建示例。