Ajax--art-template + Invoke Weather interface

Last Update:2017-11-12 Source: Internet

Author: User

Tags script tag

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

I. Principle of implementation:

1<! DOCTYPE html>234<meta charset= "UTF-8" >5<title>Title</title>67<body>8 9</body>Ten One<!--script tag if you specify a non-standard type property, the browser will recognize the contents of the content as a string-- A<script type= "Text/template" id= "Weathertemplate" > - -<p> today's weather: <%= weather_data[0].weather%></p> the<p> weather tomorrow: <%= weather_data[0].weather%></p> -      -</script> -<script src= "Lib/template-native.js" ></script> +<script> -     varObjdate = { +CurrentCity: ' Beijing ', A weather_data:[ at             { -"Date": "Saturday November 11 (Real time: 9 ℃)", -"Weather": "Sunny Turn Cloudy", -"Wind": "Southerly Breeze", -"Temperature": "10 ~ 0 ℃" -             }, in             { -"Date": "Sunday", to"Weather": "Cloudy to clear", +"Wind": "Westerly Breeze", -"Temperature": "11 ~ 0 ℃" the             } *         ] $     };Panax Notoginseng     //Template ("Templates", data Objects) -     varHtmlstr = Template ("Weathertemplate", objdate); the Console.log (HTMLSTR); +Document.body.innerHTML =Htmlstr; A</script>

Two. Call the weather interface:

1<! DOCTYPE html>234<meta charset= "UTF-8" >5<title>Title</title>6<style>7*{8margin:0;9padding:0;Tenlist-Style:none; One         } A . nav{ - border:1px solid #ddd; -         } the . Nav li { -             float: Left; - width:200px; -text-Align:center; +         } - . Nav Li a{ +text-Decoration:none; A         } at</style> - -<body> -<button id= "BTN" > No refresh Request </button> -<div class= "NAV" > -<ul id= "NavIn" > in  -</ul> to</div> +</body> - the<script type= "Text/template" id= "Navtemplate" > *<ul> $<% for(varI=0;i < resarray.length;i++) {%>Panax Notoginseng<li> -<a href= "<%=resArray[i].link%>" > the +<p><%=resArray[i].text%></p> A</a> the</li> +<%}%> -</ul> $</script> $<script src= "Lib/jquery-1.12.2.js" ></script> -<script src= "Lib/template-native.js" ></script> -<script> the  -     /**Wuyi * $.ajax ({}); the * URL server address - * DataType: Wu * Type: Request Type - * Success:function () { About * Functions executed after the request succeeds $      *     } -      * */ -$ (' #btn '). Click (function () { - $.ajax ({ AURL: ' 03nav_json.php ', +DataType: ' JSON ', theSuccessfunction(res) { - Console.log (res); $                 //If the data is an array, the default array does not have a name, so the data cannot be found in the template engine the                 //Workaround: Pass in an object {data name: Array Data} the                 varHtmlstr = Template (' Navtemplate ', {resarray:res}); the$ ('. Nav ')). Append (htmlstr); the             } -         }); in     }); the  the</script>

Three. Cell phone attribution to the interface query:

1<! DOCTYPE html>234<meta charset= "UTF-8" >5<title>Title</title>6<style>7 . tips{8 color:red;9         }Ten</style> One A<body> - -<input type= "text" name= "Phonenum" id= "phonenum"/><button> query </button> the<span class= "Tips" ></span> -<br/> -<div id= "Area" > -      +</div> -</body> + A<script type= "Text/template" id= "Areatemplate" > at<p> your number belongs to:<%=province%></p>. -<p> your service provider is:<%=carrier%></p> -<p> Your number service name is:<%=catname%></p> -</script> -<script src= "Lib/jquery-1.12.2.js" ></script> -<script src= "Lib/template-native.js" ></script> in<script> -  to  +$ (' button '). Click (function () { - $.ajax ({ theURL: "http://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=" +$ (' #phoneNum '). Val (),//querying the phone's attribution interface *DataType: "Jsonp", $Successfunction(res) {Panax Notoginseng Console.log (Isemptyobject (res)); -               if(!Isemptyobject (RES)) { the                   varHtmlstr = Template ("Areatemplate", res); + Console.log (HTMLSTR); A$ (' #area '). Empty (). append (htmlstr); the$ ('. Tips '). Text (') +                   return false; -}Else{ $$ ('. Tips '). Text (' Please enter the correct phone number ')); $               } -           } , -Errorfunction () { the$ ('. Tips '). Text (' Please enter the correct phone number ')); -           }Wuyi        }); the     }); -  Wu     functionIsemptyobject (e) { -         varT; About          for(tinche) $             return!1; -         return!0 -     } -</script>

Ajax--art-template + Invoke Weather interface

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More