Ajax--art-template + 调用天气接口
Posted QinXiao.Shou
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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[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 !0 59 } 60 </script>
以上是关于Ajax--art-template + 调用天气接口的主要内容，如果未能解决你的问题，请参考以下文章