一.实现原理：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

 </body>

 </html>

 <!--script标签如果指定一个非标准类型type属性，浏览器会把里面的内容识别成字符串-->

 <script type="text/template" id="weatherTemplate">

     <h2>城市:数据<%= currentCity %></h2>

     <p>今天天气：<%= weather_data[0].weather %></p>

     <p>明天天气：<%= weather_data[1].weather %></p>

 </script>

 <script src="lib/template-native.js"></script>

 <script>

     var objDate = {

         currentCity: '北京',

         weather_data:[

             {

                 "date": "周六 11月11日 (实时：9℃)",

                 "weather": "晴转多云",

                 "wind": "南风微风",

                 "temperature": "10 ~ 0℃"

             },

             {

                 "date": "周日",

                 "weather": "多云转晴",

                 "wind": "西风微风",

                 "temperature": "11 ~ 0℃"

             }

         ]

     };

     //template("模版",数据对象)

     var htmlStr = template("weatherTemplate",objDate);

     console.log(htmlStr);

     document.body.innerHTML = htmlStr ;

 </script>

二.调用天气接口：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         *{

             margin: 0;

             padding: 0;

             list-style: none;

         }

         .nav{

             border: 1px solid #ddd;

         }

         .nav li {

             float: left;

             width: 200px;

             text-align: center;

         }

         .nav li a{

             text-decoration: none;

         }

     </style>

 </head>

 <body>

 <button id="btn">无刷新请求</button>

 <div class="nav">

     <ul id="navIn">

     </ul>

 </div>

 </body>

 </html>

 <script type="text/template" id="navTemplate">

     <ul>

         <%for(var i=0;i < resArray.length;i++){%>

         <li>

             <a href="<%=resArray[i].link%>">

                 <img src="<%=resArray[i].src%>" alt="">

                 <p><%=resArray[i].text%></p>

             </a>

         </li>

         <%}%>

     </ul>

 </script>

 <script src="lib/jquery-1.12.2.js"></script>

 <script src="lib/template-native.js"></script>

 <script>

     /**

      *  $.ajax({});

      *    url 服务器地址

      *    dataType:

      *    type: 请求类型

      *    success :function(){

      *      请求成功点后执行的函数

      *     }

      * */

     $('#btn').click(function () {

         $.ajax({

             url:'03nav_json.php',

             dataType:'json',

             success:function (res) {

                 console.log(res);

                 // 如果数据是数组，默认数组没有名字，所以在模版引擎里无法找到数据

                 //   解决方法: 传入一个对象{ 数据名称： 数组数据}

                 var htmlStr = template('navTemplate',{resArray:res});

                 $('.nav').append(htmlStr);

             }

         });

     });

 </script>

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

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         .tips{

             color:red;

         }

     </style>

 </head>

 <body>

 <h1>请输入电话号码查询号码归属地</h1>

 <input type="text" name="phoneNum"  id="phoneNum"/><button>查询</button>

 <span class="tips"></span>

 <br/>

 <div id="area">

 </div>

 </body>

 </html>

 <script type="text/template" id="areaTemplate">

    <p> 您的号码归属地是:<%=province%></p>

    <p> 您的服务商是:<%=carrier%></p>

     <p>您号码服务名称是:<%=catName%></p>

 </script>

 <script src="lib/jquery-1.12.2.js"></script>

 <script src="lib/template-native.js"></script>

 <script>

     $('button').click(function () {

         $.ajax({

           url:"http://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel="+$('#phoneNum').val(),   // 查询手机归属地接口

           dataType:"jsonp",

           success:function (res) {

               console.log(isEmptyObject(res));

               if(!isEmptyObject(res)){

                   var htmlStr = template("areaTemplate",res);

                   console.log(htmlStr);

                   $('#area').empty().append(htmlStr);

                   $('.tips').text('')

                   return false;

               }else{

                   $('.tips').text('请输入正确的电话号码');

               }

           } ,

           error: function () {

                 $('.tips').text('请输入正确的电话号码');

           }

        });

     });

     function isEmptyObject(e) {

         var t;

         for (t in e)

             return !1;

         return !0

     }

 </script>

Ajax--art-template + 调用天气接口的更多相关文章

  1. php 调用天气接口

    前几天没事的时候,浏览博客看到了一篇免费天气接口的文章,然后调用了一下文章中提到的接口,自己琢磨了半天,把数据处理了一下,虽然现在用不到,但是说不定以后会用,所以打算记录一下,毕竟这也算是自己第一次在 ...

  2. 利用C++调用天气webservice-gSOAP方法

    首先需要下载一个gSOAP工具包 下载路径为:https://sourceforge.NET/projects/gsoap2/ 至于有关于gSOAP的一些用法和包含的文件的说明可从官网查看:http: ...

  3. c#代码 天气接口 一分钟搞懂你的博客为什么没人看 看完python这段爬虫代码，java流泪了c#沉默了 图片二进制转换与存入数据库相关 C#7.0--引用返回值和引用局部变量 JS直接调用C#后台方法（ajax调用） Linq To Json SqlServer 递归查询

    天气预报的程序.程序并不难. 看到这个需求第一个想法就是只要找到合适天气预报接口一切都是小意思,说干就干,立马跟学生沟通价格. ​ ​不过谈报价的过程中,差点没让我一口老血喷键盘上,话说我们程序猿的人 ...

  4. 三界商城 ajax调用城市接口,竟然需要登录,调用的接口需要登录,如果不登录 重定向到登录

    现象 商家入驻 填写信息的 ajax请求没有数据 network->name-headers 返回302 发现调用的接口,需要登录,否则重定向登录 //初始化用户信息查询 public func ...

  5. thinkjs学习-this.assign传递数据和ajax调用后台接口

    在页面加载时,就需要显示在页面上的数据,可以在后台使用this.assign赋值,在前台通过ejs等模板获取:用户点击按钮,或者触发某些事件和后台进行交互时,就需要用到ajax调用后台接口.本文通过一 ...

  6. PHP调用API接口实现天气查询功能

    天气预报查询接口API,在这里我使用的是国家气象局天气预报接口 使用较多的还有:新浪天气预报接口.百度天气预报接口.google天气接口.Yahoo天气接口等等. 1.查询方式 根据地名查询各城市天气 ...

  7. Ajax异步调用http接口后刷新页面

    使用Ajax的目的就是提高页面响应速度,无需同步调用,无需整个页面刷新.这里直接在html中使用js来实现: 先获取XMLHttpRequest对象 var xmlHttp; //创建一个xmlHtt ...

  8. Ajax调用WebService接口样例

    在做手机端h5的应用时,通过Ajax调用http接口时没啥问题的:但有些老的接口是用WebService实现的,也来不及改成http的方式,这时通过Ajax调用会有些麻烦,在此记录具体实现过程.本文使 ...

  9. 实现简单的PHP接口，以及使用js/jquery ajax技术调用此接口

    主要介绍下如何编写简单的php接口,以及使用js/jquery的ajax技术调用此接口. Php接口文件(check.php): <?php $jsonp_supporter = $_GET[‘ ...

随机推荐

  1. 【bzoj 4671】 异或图

    题目 神仙题啊神仙题 显然这个东西一脸不可求的样子啊,这种东西我们显然需要搞一个容斥什么的 于是设\(g_i\)表示至少存在\(i\)个联通块(联通块内部的边没有要求,联通块和联通块之间不存在边)的方 ...

  2. adb的安装及配置

    1.下载adb的安装包进行下载 2.将安装报进行解压 3.配置环境变量,将adb的根目录添加到path环境变量中 4.在终端命令行中输入adb  servion命令,检查是否安装成功,如显示版本号则安 ...

  3. leetcode 854. K-Similar Strings

    给定两个字符串, 判断最少经过多少次swap 可以使得 两个字符串一致, 首先类似的问题 是存在一个 underlying graph 的. 每一个字母都对应着一个节点,两个字符串的不一致表示为图上的 ...

  4. 从0开始学习ssh之岗位管理

    岗位应该有如下属性,id.名称.说明.新建role.java.添加id,name,description并增加三个的get set方法. 之后建立Role.hbm.xml 并加入到applicatio ...

  5. HTML5定位功能，实现在百度地图上定位

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. [转][Prism]Composite Application Guidance for WPF(6)——服务

      [Prism]Composite Application Guidance for WPF(6)——服务                             周银辉 在Ioc和DI中,最熟悉的 ...

  7. yolo-windows检测高分辨率图像及封装应用

    YOLO训练自己的数据集的一些心得 封装yolo-windows为动态链接库 yolo-windows源码 项目开源代码:LargeImageDetect-yolo-windows 由于项目需要,需要 ...

  8. anime.js 学习笔记

    官网演示/文档 anime.js 是一个简便的JS动画库,用法简单而且适用范围广,涵盖CSS,DOM,SVG还有JS的对象,各种带数值属性的东西都可以动起来. 实际演示和代码,官网写得很详细清楚了,这 ...

  9. 转：IO模型-- 同步和阻塞，异步和非阻塞的区别

    源地址 http://hi.baidu.com/deep_pro/item/db0c581af1c1f17e7b5f2534 这些词之间的区别难倒了很多人,还有什么同步阻塞, 同步非阻塞, 异步阻塞, ...

  10. Java学习记录--ModelMapper的使用

    在项目中很多时候需要把Model和DTO两个模型类来回转换,保证Model对外是隐私的,同时类似密码之类的属性也能很好地避免暴露在外了. 那么ModelMapper就是为了方便转换而实现的一个类库,下 ...