天气接口

fcjboke

于 2016-10-21 07:49:55 发布

阅读量225

点赞数

分类专栏： php

本文链接：https://blog.csdn.net/qq_35835160/article/details/52879495

版权

php 专栏收录该内容

66 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html lang="en-US">
<head>
   <meta charset="UTF-8">
   <title>天气查询</title>
</head>
<body>
<center>
   <h1>未来一周天气查询</h1>
   <input type="text" placeholder="请输入城市名称" id="city" /> 
   <input type="button" value="查询" id="bts"/>
   <br/><br/>
   <div id="wf">
   </div>
</center>
</body>

<Script src="jquery.12.mini.js"></script>

<script>
$(function(){
   //点击获取天气信息
   $("input[id='bts']").click(function(){
       //获取城市名称
       var city = $("input[id='city']").val();
       //alert(city);
       //ajax请求
       var url = "http://api.k780.com:88/?app=weather.future&weaid="+city+"&appkey=19964&sign=f9b5202283fbfb46b23c4d23662a72e9&format=json&jsoncallback=?";
        $.get(url,function(data){
           var obj = data.result;
              //alert(obj);
              //alert(obj[0].days);
           //循环遍历
           var info = "<table style='text-align:center;' width='800' border='1' ><tr ><td>日期</td><td>星期</td><td>城市</td><td>天气</td><td>温度</td><td>风向</td><td>风力</td></tr>";
           for(var i in obj){
               info += "<tr><td>"+obj[i].days+"</td><td>"+obj[i].week+"</td><td>"+obj[i].citynm+"</td><td>"+obj[i].weather+"</td><td>"+obj[i].temperature+"</td><td>"+obj[i].wind+"</td><td>"+obj[i].winp+"</td></tr>";
           }
           info += "</table>";
           //将数据追加到div中
           $('#wf').html(info);
       },'jsonp');
   });
})
</script>
</html>