JSONP跨域实例之天气查询

最新推荐文章于 2022-03-21 11:22:48 发布

Double_路

最新推荐文章于 2022-03-21 11:22:48 发布

阅读量109

点赞数

分类专栏：我的网页 JSON

本文链接：https://blog.csdn.net/qq_44606245/article/details/113827076

版权

我的网页同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

JSON

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>天气查询</title>
  <link rel="stylesheet" href="../code/css/bootstrap.min.css">
  <script>
    function download(data) {
      var oT1 = document.getElementById("t1");
      var oInfo = document.getElementById("info");
      oInfo.innerHTML = `城市：${data.city}|更新时间：${data.update_time}`;
      var arr = data.list;
      str = ``;
      for (var i = 0; i < arr.length; i++) {
        str += `<tr>
              <td>${arr[i].date}</td>
              <td>${arr[i].weather}</td>
              <td>${arr[i].wind}</td>
              <td>${arr[i].temp}</td>
            </tr>`;
      }
      oT1.innerHTML = str;
    }
  </script>
  <script>
    window.onload = function () {
      var oSearch = document.getElementById("search");
      var oCity = document.getElementById("city");
      oSearch.onclick = function () {
        if (!oCity.value) {
          alert("请输入城市名称");
        } else {
          var oScript = document.createElement("script");
          oScript.src = `https://query.asilu.com/weather/weather?city=${oCity.value}&callback=download`;
          document.body.appendChild(oScript);
        }
      }
    }  
  </script>
</head>

<body>
  <div class="container">
    <div class="panel panel-primary">
      <div class="panel-heading">
        <h2>天气查询
          <span id="info"></span>
        </h2>
      </div>
      <div class="panel-body">
        <div class="form-group">
          <label for="city">城市名字</label>
          <input type="text" name="" id="city" class="form-control">
        </div>
        <button id="search" class="btn btn-primary">查询</button>
      </div>


      <div class="panel-footer">
        <table class="table table-bordered table-hover">
          <thead>
            <tr>
              <th>日期</th>
              <th>天气</th>
              <th>风向</th>
              <th>气温</th>
            </tr>
          </thead>
          <tbody id="t1">

          </tbody>
        </table>
      </div>
    </div>
  </div>
</body>

</html>

Double_路

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JSONP跨域实例之天气查询

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>天气查询</title> <link rel="stylesheet" href="../code/css/bootstr
复制链接

扫一扫