Ajax--art-template + 调用天气接口

一.实现原理：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 
 9 </body>
10 </html>
11 <!--script标签如果指定一个非标准类型type属性，浏览器会把里面的内容识别成字符串-->
12 <script type="text/template" id="weatherTemplate">
13     <h2>城市:数据<%= currentCity %></h2>
14     <p>今天天气：<%= weather_data[0].weather %></p>
15     <p>明天天气：<%= weather_data[1].weather %></p>
16     
17 </script>
18 <script src="lib/template-native.js"></script>
19 <script>
20     var objDate = {
21         currentCity: '北京',
22         weather_data:[
23             {
24                 "date": "周六 11月11日 (实时：9℃)",
25                 "weather": "晴转多云",
26                 "wind": "南风微风",
27                 "temperature": "10 ~ 0℃"
28             },
29             {
30                 "date": "周日",
31                 "weather": "多云转晴",
32                 "wind": "西风微风",
33                 "temperature": "11 ~ 0℃"
34             }
35         ]
36     };
37     //template("模版",数据对象)
38     var htmlStr = template("weatherTemplate",objDate);
39     console.log(htmlStr);
40     document.body.innerHTML = htmlStr ;
41 </script>

二.调用天气接口：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         *{
 8             margin: 0;
 9             padding: 0;
10             list-style: none;
11         }
12         .nav{
13             border: 1px solid #ddd;
14         }
15         .nav li {
16             float: left;
17             width: 200px;
18             text-align: center;
19         }
20         .nav li a{
21             text-decoration: none;
22         }
23     </style>
24 </head>
25 <body>
26 <button id="btn">无刷新请求</button>
27 <div class="nav">
28     <ul id="navIn">
29 
30     </ul>
31 </div>
32 </body>
33 </html>
34 <script type="text/template" id="navTemplate">
35     <ul>
36         <%for(var i=0;i < resArray.length;i++){%>
37         <li>
38             <a href="<%=resArray[i].link%>">
39                 <img src="<%=resArray[i].src%>" alt="">
40                 <p><%=resArray[i].text%></p>
41             </a>
42         </li>
43         <%}%>
44     </ul>
45 </script>
46 <script src="lib/jquery-1.12.2.js"></script>
47 <script src="lib/template-native.js"></script>
48 <script>
49 
50     /**
51      *  $.ajax({});
52      *    url 服务器地址
53      *    dataType:
54      *    type: 请求类型
55      *    success :function(){
56      *      请求成功点后执行的函数
57      *     }
58      * */
59     $('#btn').click(function () {
60         $.ajax({
61             url:'03nav_json.php',
62             dataType:'json',
63             success:function (res) {
64                 console.log(res);
65                 // 如果数据是数组，默认数组没有名字，所以在模版引擎里无法找到数据
66                 //   解决方法: 传入一个对象{ 数据名称： 数组数据}
67                 var htmlStr = template('navTemplate',{resArray:res});
68                 $('.nav').append(htmlStr);
69             }
70         });
71     });
72 
73 </script>

三.手机归属地接口查询：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .tips{
 8             color:red;
 9         }
10     </style>
11 </head>
12 <body>
13 <h1>请输入电话号码查询号码归属地</h1>
14 <input type="text" name="phoneNum"  id="phoneNum"/><button>查询</button>
15 <span class="tips"></span>
16 <br/>
17 <div id="area">
18     
19 </div>
20 </body>
21 </html>
22 <script type="text/template" id="areaTemplate">
23    <p> 您的号码归属地是:<%=province%></p>
24    <p> 您的服务商是:<%=carrier%></p>
25     <p>您号码服务名称是:<%=catName%></p>
26 </script>
27 <script src="lib/jquery-1.12.2.js"></script>
28 <script src="lib/template-native.js"></script>
29 <script>
30 
31 
32     $('button').click(function () {
33         $.ajax({
34           url:"http://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel="+$('#phoneNum').val(),   // 查询手机归属地接口
35           dataType:"jsonp",
36           success:function (res) {
37               console.log(isEmptyObject(res));
38               if(!isEmptyObject(res)){
39                   var htmlStr = template("areaTemplate",res);
40                   console.log(htmlStr);
41                   $('#area').empty().append(htmlStr);
42                   $('.tips').text('')
43                   return false;
44               }else{
45                   $('.tips').text('请输入正确的电话号码');
46               }
47           } ,
48           error: function () {
49                 $('.tips').text('请输入正确的电话号码');
50           }
51        });
52     });
53 
54     function isEmptyObject(e) {
55         var t;
56         for (t in e)
57             return !1;
58         return !0
59     }
60 </script>

 

posted @ 2017-11-12 00:42  QinXiao.Shou  阅读(856)  评论(4)    收藏  举报