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>
