Question

https://ipapi.co/json/上有一个方便的IP跟踪器。我希望网站的查看者在网页底部看到他们的IP地址。我现在拥有的是：

<div class="container">
  <div id="IP">IP Address should show here.</div>
  <script>
    document.getElementById('IP').innerHTML = (https://ipapi.co/json/).ip;
  </script>
</div>

但是，它不显示IP地址。我可能使用了错误的方法。如何使其正确显示？

编辑：我尝试这样做：

<div class="container">
  <div id="IP">IP Address should show here.</div>
  <script>
    fetch('https://ipapi.co/json/')
      .then(function(response) {
        return response.json();
      })
      .then(function(myJson) {
        document.getElementById('IP').innerHTML = JSON.stringify(myJson.ip);
      });
  </script>
</div>

但这也不起作用。

Answer 1

您可以考虑使用JavaScript Fetch API。

在您的情况下，可能是这样的：

fetch('https://ipapi.co/json/')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    document.getElementById('IP').innerHTML = JSON.stringify(myJson.ip);
  });

Answer 2

您要查找的关键字是AJAX。

AJAX是后台的请求，您可以使用这些请求加载更多数据。但是，出于安全原因，这对于跨域是不可能的。您唯一的选择是在自己的后端中创建自己的接口，该接口为您提供JSON数据。

PS：您的问题已被否决，因为似乎您甚至没有在互联网上寻找解决方案。

Answer 3

您追求的是这样的：

<div>IP address: <span id="ipfield">loading...</span></div>
<script>
  function callback(json) {
    document.getElementById("ipfield").innerHTML = json.ip;
  }
</script>
<script src="https://ipapi.co/jsonp/"></script>

请注意，IP API的URL中的格式参数已从json更改为jsonp。 JSONP格式与JSON相似，但带有环绕的javascript函数。加载JSONP文件作为脚本源时，它将调用回调函数，并将JSON数据作为参数传递。

这仅起作用，因为您正在使用的网站以JSONP格式以及纯JSON提供数据。如果没有，则需要使用其他答案中给出的更复杂的解决方案之一。

Answer 4

您不能仅通过在方括号中插入URL从网站获取数据/ json。考虑阅读有关HTTP请求，获取数据，JSON和JSON方法的内容：parse()和stringify()，以避免将来出现类似的问题。

https://medium.com/@sahilkkrazy/fetch-vs-axios-http-request-c9afa43f804e

What is difference between Axios and Fetch?

Difference between JSON.stringify and JSON.parse

还有您的解决方案示例：

fetch("https://ipapi.co/json/")
  .then(function(response) {
    return response.json();
 })
 .then(function(myJson) {
   const ip = myJson.ip;
   document.getElementById("IP").innerHTML = ip;
});

Codesandbox： https://codesandbox.io/s/9ql9zr2o14

如何将数据从Internet上的JSON文件显示为网站上的HTML？

4 个答案: