Ajax--art-template + 調用天氣接口
阿新 • • 發佈：2017-11-12
idt val fun length btn 標準類型 turn http pen
一.實現原理：
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 varobjDate = { 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 + 調用天氣接口