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

一.实现原理：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <body>

 </body>
 </html>
 <!--script标签如果指定一个非标准类型type属性，浏览器会把里面的内容识别成字符串-->
 <script type="text/template" id="weatherTemplate">
     <h2>城市:数据<%= currentCity %></h2>
     <p>今天天气：<%= weather_data[0].weather %></p>
     <p>明天天气：<%= weather_data[1].weather %></p>

 </script>
 <script src="lib/template-native.js"></script>
 <script>
     var objDate = {
         currentCity: '北京',
         weather_data:[
             {
                 "date": "周六 11月11日 (实时：9℃)",
                 "weather": "晴转多云",
                 "wind": "南风微风",
                 "temperature": "10 ~ 0℃"
             },
             {
                 "date": "周日",
                 "weather": "多云转晴",
                 "wind": "西风微风",
                 "temperature": "11 ~ 0℃"
             }
         ]
     };
     //template("模版",数据对象)
     var htmlStr = template("weatherTemplate",objDate);
     console.log(htmlStr);
     document.body.innerHTML = htmlStr ;
 </script>

二.调用天气接口：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <style>
         *{
             margin: 0;
             padding: 0;
             list-style: none;
         }
         .nav{
             border: 1px solid #ddd;
         }
         .nav li {
             float: left;
             width: 200px;
             text-align: center;
         }
         .nav li a{
             text-decoration: none;
         }
     </style>
 </head>
 <body>
 <button id="btn">无刷新请求</button>
 <div class="nav">
     <ul id="navIn">

     </ul>
 </div>
 </body>
 </html>
 <script type="text/template" id="navTemplate">
     <ul>
         <%for(var i=0;i < resArray.length;i++){%>
         <li>
             <a href="<%=resArray[i].link%>">
                 <img src="<%=resArray[i].src%>" alt="">
                 <p><%=resArray[i].text%></p>
             </a>
         </li>
         <%}%>
     </ul>
 </script>
 <script src="lib/jquery-1.12.2.js"></script>
 <script src="lib/template-native.js"></script>
 <script>

     /**
      *  $.ajax({});
      *    url 服务器地址
      *    dataType:
      *    type: 请求类型
      *    success :function(){
      *      请求成功点后执行的函数
      *     }
      * */
     $('#btn').click(function () {
         $.ajax({
             url:'03nav_json.php',
             dataType:'json',
             success:function (res) {
                 console.log(res);
                 // 如果数据是数组，默认数组没有名字，所以在模版引擎里无法找到数据
                 //   解决方法: 传入一个对象{ 数据名称： 数组数据}
                 var htmlStr = template('navTemplate',{resArray:res});
                 $('.nav').append(htmlStr);
             }
         });
     });

 </script>

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

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <style>
         .tips{
             color:red;
         }
     </style>
 </head>
 <body>
 <h1>请输入电话号码查询号码归属地</h1>
 <input type="text" name="phoneNum"  id="phoneNum"/><button>查询</button>
 <span class="tips"></span>
 <br/>
 <div id="area">

 </div>
 </body>
 </html>
 <script type="text/template" id="areaTemplate">
    <p> 您的号码归属地是:<%=province%></p>
    <p> 您的服务商是:<%=carrier%></p>
     <p>您号码服务名称是:<%=catName%></p>
 </script>
 <script src="lib/jquery-1.12.2.js"></script>
 <script src="lib/template-native.js"></script>
 <script>

     $('button').click(function () {
         $.ajax({
           url:"http://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel="+$('#phoneNum').val(),   // 查询手机归属地接口
           dataType:"jsonp",
           success:function (res) {
               console.log(isEmptyObject(res));
               if(!isEmptyObject(res)){
                   var htmlStr = template("areaTemplate",res);
                   console.log(htmlStr);
                   $('#area').empty().append(htmlStr);
                   $('.tips').text('')
                   return false;
               }else{
                   $('.tips').text('请输入正确的电话号码');
               }
           } ,
           error: function () {
                 $('.tips').text('请输入正确的电话号码');
           }
        });
     });

     function isEmptyObject(e) {
         var t;
         for (t in e)
             return !1;
         return !0
     }
 </script>