一.实现原理：

 <!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>

巴特西

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

一.实现原理：

二.调用天气接口：

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

最新文章

热门文章