一.实现原理：
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>
时间： 2024-10-20 09:06:20