Jquery+ajax 天气预报实例

效果图

HTML代码块

<!DOCTYPE html>
<html>
<head>
 <title></title>
 <style>
 body{
     background: url(蓝天绿地.jpg) no-repeat center 0;
 }
 #container{
    height: 100%;
     width: 440px;
     background:pink;
     text-align: center;
     margin: auto;
     padding: 0;
 }
 h1{
     margin: auto;
     padding: 0;
 }
 li{
     list-style: none;
     text-decoration: none;
 }
 </style>
 <script type="" src="template-web.js"></script>
 <script type="" src="./jquery-1.7.2.min.js"></script>
 <script type="" src="./min.js"></script>
</head>
<body>  
        
        <div id="container">
                <h1>全国天气预报</h1>
                <hr>
                <input type="text" placeholder="请输入城市名称:" id="headerGet">
                <div class="list">
                    <ul id="ullist">
                        <script type="text/html" id="tmplt">
                       
                            <li>
                                <h3>城市:{{result.city}}</h3>
                            </li>
                            <li>
                                <h3>时间:{{result.date}}</h3>
                            </li>
                            <li>
                                <h3>星期:{{result.week}}</h3>
                            </li>
                            <li>
                                <h3>天气:{{result.weather}}</h3>
                            </li>
                            <li>
                                <h3>风力和风向:{{result.windpower}} {{result.windspeed}}</h3>
                            </li>
                            <li>
                                <ul>
                                    {{each result.index val index}}
                                     <h3>{{val.iname}}</h3>
                                     <li>{{val.ivalue}}</li>
                                     <li>{{val.detail}}</li>
                                     {{/each}}
                                </ul>
                            </li>
        
                        </script>
                    </ul>
                </div>
        </div>
</body>
</html>

js代码块

jQuery(document).ready(function(){
    //按回车键获取到文本框的值
    getData()
    $('#headerGet').on('keydown',function(e){

        if(e.keyCode == 13){

          var param = $(this).val();
          //console.log(param);
          getData(param);
        }
    });
 
})

function getData(param){
    var param = param ? param :"北京";
    $.ajax({
        type:'get',
        url:'https://api.jisuapi.com/weather/query',
        data:{
            appkey:"845c5c564d61e972",
            city:param
        },
        dataType:'jsonp',
        jsonp:'callback',
        success:function(json){
            console.log(json);
           var html = template('tmplt',json);
           $('#ullist').html(html);
        }
    })
}

你可能感兴趣的:(html)