JS - 从API请求打印JSON信息

Question

我有这个功能。使用xhr.response，我得到了我的json值。问题：如何将这些JSON值附加到HTML标签？谢谢。

不相关的问题：有没有人知道一个好的网站，其中开始JSON概念的紧凑总结？

例如标签国家/地区的国家/地区。

function initPage(){
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "http://ip-api.com/json", false);
    xhr.send();

    console.log(xhr.status);
    console.log(xhr.statusText);
    console.log(xhr);
    console.log(xhr.response);
}

JSON输出： 访问http://ip-api.com/json

所需的HTML：

<label id="landcode"></label>
<label id="country"></label>
<label id="regio"></label>
<label id="city"></label>
<label id="postcode"></label>
<label id="latitude"></label>
<label id="longitude"></label>
<label id="ip"></label>

Answer 1

您正在进行XMLHttpRequest()来电，您需要检查status == 200（2xx成功/ 200 OK）和readyState = 4（已完成）：

＆＃13;

＆＃13;

<button type="button" onclick="initPage()">Change Content</button>
<br>
<label id="country">Before XMLHttpRequest CALL</label>

<script>
  function initPage() {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById("country").innerHTML =
          this.responseText;
      }
    };
    xhr.open("GET", "http://ip-api.com/json", false);
    xhr.send();

    console.log(xhr.status);
    console.log(xhr.statusText);
    console.log(xhr);
    console.log(xhr.response);
  }
</script>

＆＃13;

＆＃13;

＆＃13;