一.实现原理：
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[0].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%>" >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 !059 ????}60 </script>Ajax--art-template + 调用天气接口
原文地址：http://www.cnblogs.com/mrszhou/p/7820500.html