使用art-Template模板获取天气预报信息 





JSON数据如下： 
1 var data ={
 2     "cityid":"101180101",
 3     "update_time":"2020-11-09 11:45:26",
 4     "city":"郑州",
 5     "cityEn":"zhengzhou",
 6     "country":"中国",
 7     "countryEn":"China",
 8     "data":[
 9         {
10             "day":"9日（今天）",
11             "date":"2020-11-09",
12             "week":"星期一",
13             "wea":"晴"
14         },
15         {
16             "day":"9日（今天）",
17             "date":"2020-11-09",
18             "week":"星期一",
19             "wea":"晴"
20         }
21     ]
22 }










使用art-Template模板过程
 1 <body>
 2     <div class="table-responsive">
 3         <h3>天气预报</h3>
 4         <table class="table" align="center" id="tables">
 5             <!-- 模板插入位置 -->
 6         </table>
 7     </div>
 8     <!-- 1.引入jsonp函数插件 -->
 9     <script src="js/jsonp.js"></script>
10     <!-- 2.引入template-web.js -->
11     <script src="js/template-web.js"></script>
12     <!-- 3.创建template模板 -->
13     <script type="text/html" id="tplHead">
14         <tr>
15             <th>日期</th>
16             <th>温度</th>
17             <th>天气</th>
18             <th>星期</th>
19             <th>风向</th>
20             <th>风级</th>
21             <th>空气指数</th>
22         </tr>
23         <!-- 展示普通数据  -->
24         {{if headInfo}}
25         <tr>
26             <td>{{headInfo.cityid}}</td>
27             <td>{{headInfo.city}}</td>
28             <td>{{headInfo.cityEn}}</td>
29             <td>{{headInfo.country}}</td>
30             <td>{{headInfo.country}}</td>
31             <td>{{headInfo.countryEn}}</td>
32             <td>{{headInfo.update_time}}</td>
33 
34         </tr>
35         {{/if}}
36         <!-- 展示多组数据 -->
37         {{each headInfo.data}}
38         <tr>
39             <td>{{$value.date}}</td>
40             <td>{{$value.tem}}</td>
41             <td>{{$value.wea}}</td>
42             <td>{{$value.week}}</td>
43             <td>{{$value.win[0]}}</td>
44             <td>{{$value.win_speed}}</td>
45             <td>{{$value.air_level}}</td>
46         </tr>
47         {{/each}}
48     </script>
49     <!-- 4.获取数据 -->
50     <script>
51         var tables = document.querySelector('#tables');
52         //使用jsonp获取数据
53         jsonp({
54             url: 'https://tianqiapi.com/api',
55             data: {
56                 appid: '78141834',
57                 appsecret: '45U5ttdZ',
58                 version: 'v1',
59                 cityid: '101180101',
60             },
61             success: function(data) {
62                 //template第一个参数是模板id,第二个参数作为全局对象，不可以是数组
63                 var tableHead = template('tplHead', {
64                     headInfo: data
65                 });
66                 //将获取的数据填充到页面文档
67                 tables.innerHTML = tableHead;
68             }
69
70         })
71     </script>
72 
73 </body>




 


 




 





 




 


 






            

            
posted @ 
2020-11-09 14:17 
陆豪同学 
阅读(220) 
评论(0) 
 
收藏 
举报