MENU

ajax实现天气预报查询系统

• March 30, 2019 • Read: 1663 • Web Program

ajax实现天气预报查询系统!JS部分是通过原生的语法和JQ语法混写的。

演示图

Html部分

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>天气预报</title>
    <style>
      table {
        margin: 0 auto;
        margin-top: 30px;
        color: aliceblue;
        border: 1px white solid;
        text-align: center;
        width: 800px;
        font-family: "微软雅黑";
        font-size: 20px;
      }
      table tr {
        height: 60px;
      }
      body {
        background: url("https://api.ixiaowai.cn/gqapi/gqapi.php");
      }
      .svip {
        margin-left: 50%;
        transform: translateX(-79%);
        margin-top: 70px;
        overflow: hidden;
        border: 1px solid white;
        background: #ffa50000;
        color: aliceblue;
        outline: none;
        width: 500px;
        height: 30px;
      }
      * {
        margin: 0;
        padding: 0;
      }
      .vip {
        border: none;
        width: 150px;
        height: 32px;
        cursor: pointer;
        background: #ffffff;
        color: darkorange;
        outline: none;
        z-index: 99;
        position: absolute;
        left: 343px;
        top: 70px;
        transition: 0.3s;
      }
      .vip:hover {
        background: #c9ff05;
      }
      p {
        text-align: center;
        color: aliceblue;
        font-size: 18px;
        margin-top: 20px;
      }
      b {
        text-align: center;
        color: aliceblue;
        font-size: 18px;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 27px;
        font-size: 30px;
      }
      .jiu {
        position: relative;
        display: inline-block;
        left: 50%;
        transform: translateX(-50%);
        left: 750px;
        top: 14px;
      }
    </style>
  </head>

  <body>
    <b class="title">欢迎访问肖虎威天气查询系统!</b>
    <table border="1" cellpadding="0" cellspacing="0">
      <thead>
        <tr>
          <td>日期</td>
          <td>天气</td>
          <td>最高温</td>
          <td>最低温</td>
          <td>风向</td>
        </tr>
      </thead>
      <tbody></tbody>
      <div class="jiu">
        <input
          type="text"
          name="地区"
          placeholder="请输入您要查询的城市!"
          class="svip"
        />
        <button value="查询" class="vip">查询</button>
      </div>
    </table>
    <p class="diqu">以上为武汉近5日的天气!</p>
    <p class="tips">欢迎使用~</p>
    <script src="jquery-1.12.4.min.js"></script>
      </body>
</html>

JS部分

    <script>
      $(function() {
        var tips;
        $.ajax({
          //加载天气资源接口
          url: "https://www.apiopen.top/weatherApi?city=武汉", //天气接口
          success: function(res) {
            //接收成功返回!
            if (res.code === 200) {
              //200为状态码表示成功
              var tr = ""; //定义一个空的用来接收接受后面的变量
              for (var i = 0; i < res.data.forecast.length; i++) {
                //走循环,小于接口数据中forecast集合的长度
                tr += "<tr class='skt'>"; //创建一行的行头
                tr += "<td>" + res.data.forecast[i].date + "</td>"; //追加第一个列
                tr += "<td>" + res.data.forecast[i].type + "</td>"; //追加第二个列
                tr += "<td>" + res.data.forecast[i].high + "</td>"; //追加第三个列
                tr += "<td>" + res.data.forecast[i].low + "</td>"; //追加第四个列
                tr += "<td>" + res.data.forecast[i].fengxiang + "</td>"; //追加第五个列

                tr += "</tr>"; //创建第一个行尾
              }
              $("tbody").append(tr); //将创建好的一行添加到表格的子元素
              $(".tips")[0].innerHTML = "温馨提示您:" + res.data.ganmao + ""; //动态修改提示语部分
            } else {
              alert("数据请求失败"); //当请求失败时 弹出框
            }
          }
        });
      });
      $(".vip").click(function() {
        //定义查询按钮函数
        var wz = `https://www.apiopen.top/weatherApi?city=${
          $(".svip")[0].value
        }`; //字符串拼接(用户输入值)

        $(".diqu")[0].innerHTML =
          "以上为" + $(".svip")[0].value + "近5日的天气!"; //动态修改提示语地区部分
        $.ajax({
          url: wz, //再次调用拼接后的天气接口
          success: function(res) {
            //成功后的定义函数
            del(); //执行删除前面一个城市的数据
            if (res.code === 200) {
              //200为状态码表示成功
              var tr = ""; //定义一个空的用来接收接受后面的变量
              for (var i = 0; i < res.data.forecast.length; i++) {
                //走循环,小于接口数据中forecast集合的长度
                tr += "<tr class='skt'>"; //创建一行的行头
                tr += "<td>" + res.data.forecast[i].date + "</td>"; //追加第一个列
                tr += "<td>" + res.data.forecast[i].type + "</td>"; //追加第二个列
                tr += "<td>" + res.data.forecast[i].high + "</td>"; //追加第三个列
                tr += "<td>" + res.data.forecast[i].low + "</td>"; //追加第四个列
                tr += "<td>" + res.data.forecast[i].fengxiang + "</td>"; //追加第五个列
                tr += "</tr>"; //创建一行的行尾
              }
              $("tbody").append(tr); //将创建好的一行添加到表格的子元素
              $(".tips")[0].innerHTML = "温馨提示您:" + res.data.ganmao + ""; //动态修改提示语部分
            } else {
              alert("输入城市有误,请重新输入!"); //当请求失败时 弹出框
            }
          }
        });
      });
      function del() {
        //定义删除上一个城市数据的函数
        $(".skt").remove();
      } //获取所有带skt的class将其remove掉
    </script>

演示地址

在线测试

Last Modified: April 9, 2019
Archives QR Code
QR Code for this page
Tipping QR Code
Leave a Comment

4 Comments
  1. 感谢分享!总算是能够简单的使用一次接口了.....(感觉你博文里面的很多例子都很赞啊,引导我快速上手实践了

    1. @程志辉有几个地方可以优化一下:
      1.没必要多次去调用ajax
      2.第二次请求ajax else返回的是城市输入有误,这个感觉不对的哇....要么去判断一下用户输入的内容是否为汉字是否为空,要么直接判断接口返回值msg是否为"未获取到相关数据!"

    2. @程志辉emmm.....好像还是得调用两次ajax我傻屌了....

    3. @程志辉哈哈哈 加油加油