html的json数据实例

发布于 2023-02-18  146 次阅读 


<html>
  <head>
    <title>Weather API</title>
  </head>
  <body>
    <script>
      let xhr = new XMLHttpRequest();
      xhr.open('GET', 'https://api.vvhan.com/api/weather', true);
      xhr.onload = function() {
        if (this.status == 200) {
          let response = JSON.parse(this.responseText);
          let city = response.city;
          let week = response.info.week;
          let p = document.createElement('p');
          p.innerHTML = `City: ${city}, Week: ${week}`;
          document.body.appendChild(p);
        }
      };
      xhr.send();
    </script>
  </body>
</html>

返回json浏览

{"success":true,"city":"玉林市","info":{"date":"2023-02-18","week":"星期六","type":"多云","high":"最高 24°C","low":"最低 16°C","fengxiang":"东南风","fengli":"3级","night":{"type":"多云","fengxiang":"东北风","fengli":"3级"},"air":{"aqi":92,"aqi_level":2,"aqi_name":"良","co":"1","no2":"34","o3":"31","pm10":"96","pm2.5":"68","so2":"49"},"tip":"现在有雾，开车注意安全~ 现在的温度比较凉爽~"}}

示例代码只显示city和week数据。