天气查询

最新推荐文章于 2021-05-15 21:21:57 发布

青春已被放纵了

最新推荐文章于 2021-05-15 21:21:57 发布

阅读量413

点赞数

分类专栏： API

本文链接：https://blog.csdn.net/qq_36373262/article/details/52933934

版权

API 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>天气查询</title>
</head>
<body>
<center>
<tr>
   <td><h3><font style="color:red">请输入查询的城市</font></h3><input type="text" id="city"><input type="button" value="查询" id="button"></td>
</tr>
<table border="1" id="table" style="display:none;background:url(timg.jpg);">
   <tr>
       <th>城市</th>
       <th>日期</th>
       <th>温度</th>
       <th>天气</th>
       <th>星期</th>
       <th>风向</th>
       <th>图标</th>
   </tr>
   <tbody id="tbody"></tbody>
</table>
</center>

</body>
</html>
<script src="jquery-2.1.4.min.js"></script>
   <script>
   $(function(){
           $("#button").click(function(){
           var city=$("#city").val();
        $.ajax({
            type: "GET",
            // async: false,
            url:"http://api.k780.com:88/?app=weather.future&weaid="+city+"&&appkey=21376&sign=241bf4e35fe1b54f13fee939124dec41&format=json&&jsoncallback=data",
            dataType: "jsonp",
            jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
            jsonpCallback:"data",
            success:function(data){ //成功执行处理，对应后台返回的getName(data)方法。
               var str="";
               for(i in data.result){
                   str+="<tr>";
                   str+="<th>"+data.result[i].citynm+"</th>";
                   str+="<td>"+data.result[i].days+"</td>";
                   str+="<td>"+data.result[i].temperature+"</td>";
                   str+="<td>"+data.result[i].weather+"</td>";
                   str+="<td>"+data.result[i].week+"</td>";
                   str+="<td>"+data.result[i].wind+"</td>";
                   // str+="<td>"+data.result[i].winp+"</td>";
                   str+="<td><img src="+data.result[i].weather_icon+"><img src="+data.result[i].weather_icon1+"></td>";
                   str+="</tr>";
               }
               $("#table").show();
               $("#tbody").html(str);
           }
       })
   })
})
</script>