一.实现原理：

 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%>" alt="">
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>

转载于:https://www.cnblogs.com/mrszhou/p/7820500.html

Ajax--art-template + 调用天气接口相关推荐

Webservice调用天气接口案例
废话不多说,希望能够帮助到大家. 天气接口:http://www.webxml.com.cn/WebServices/WeatherWebService.asmx?wsdl pom.xml配置: co ...
Android调用天气接口（和风天气）
第一次开通博客,不知写些什么.目前正在做一个Android项目,需要调用天气接口来显示连续几天的天气信息状况,但由于网上一些资料有点杂乱或不全(或许是自己水平不够,别人写的简洁),总之刚开始时无从下手 ...
WebService调用天气接口及手机号查询归属地接口
Webservice手机号查询接口的调用 1 在这里我讲述,如何使用wsdl2命令生成客户端代码. 因为使用jdk自带的也可以,就是很烦.因为会生成.class字节码文件与.java文件在一个文件夹下 ...
php 调用天气接口
这是我在博客园写的第一篇原创文章,现在直接复制过来了,CSDN 的博客搬家功能并不好用,只能手动了. 前几天没事的时候,浏览博客看到了一篇免费天气接口的文章,然后调用了一下文章中提到的接口,自己琢磨了 ...
java百度天气接口解析_Java调用天气接口（百度天气）解析返回的JSON数据
简介:本文详细讲述了通过Java调用百度天气接口的方法,取得返回的JSON格式的数据,并且通过第三方包解析JSON格式的数据. 通过百度天气API调用网络编程接口接收返回的JSON格式的数据. 关于百 ...
如何调用天气接口（如何解决WebService客户端引用服务器无法处理请求。未将对象引用设置到对象的实例）
正常操作是: 添加服务引用输入UPL地址,更改命名空间确定然后在cs文件里面引用WebServer所在的命名空间,实例化类,就可以调用其中方法调用getWeather()方法的时候会报服务器 ...
前端调用天气接口，返回实时和预报天气
返回有实时温度:今日和未来4天的天气情况.气温范围.风力:昨日天气.具体看打印效果 <template><div><div><h1>实时:</h1 ...
vue 免费的每天不限次数的调用天气接口
文档:360免费天气API接口.note 链接:http://note.youdao.com/noteshare?id=8333c579b80f71e91a4156745fde5b27&sub ...
webService学习7:调用天气接口
1 参考 webService学习3:客户端生成webservice代码生成客户端代码 2 在wsdl中搜索 wsdl:service入口类 3 代码编写 package test;impor ...

Ajax--art-template + 调用天气接口

一.实现原理：

二.调用天气接口：

三.手机归属地接口查询：

Ajax--art-template + 调用天气接口相关推荐

最新文章

热门文章