一.实现原理：

 <!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. Hibernate关联映射（一对多/多对多）

    版权声明:翀版 https://blog.csdn.net/biggerchong/article/details/843401053.  Hibernate关联映射上接Hibernate持久化类:h ...

  2. {Django基础七之Ajax} 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解)

    {Django基础七之Ajax} 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解)   Django基础七之 ...

  3. Catenyms (POJ2337) 字典序最小欧拉路

    // 很久不写图论,连模板也不熟悉了0.0 // 这题是一个技巧性比较高的暴力DFS Catenyms 题目大意 定义catenym为首尾字母相同的单词组成的单词对, 例如: dog.gopher g ...

  4. Cesium官方教程7--三维模型

    原文地址:https://cesiumjs.org/tutorials/3D-Models-Tutorial/ 三维模型 (3D Models) 这篇教程给大家介绍,如何在Cesium中通过Primi ...

  5. 从GoogLeNet至Inception v3

    从GoogLeNet至Inception v3 一.CNN发展纵览 我们先来看一张图片: 1985年,Rumelhart和Hinton等人提出了后向传播(Back Propagation,BP)算法( ...

  6. C++项目使用的开源库记录

    日志库:log4cplus 网络库:libcurl xml库:tinyxml 多媒体库:lib555 视频解码库:ffmpeg 用opencv的VideoCapture类可以直接打开rtsp视频,所以 ...

  7. Django项目：CMDB(服务器硬件资产自动采集系统)--10--06CMDB测试Linux系统采集硬件数据的命令05

    cd /py/AutoClient/bin python3 auto-client.py /usr/local/python3/bin/pip install requests python3 aut ...

  8. C++继承相关知识点总结

    1:派生类继承基类的成员并且可以定义自己的附加成员.每个派生类对象包含两个部分:从基类继承的成员和自己定义的成员. 每个派生类对象都有基类部分,包括基类的private成员.类可以访问共基类的publ ...

  9. 你真的了解ES6的promise吗？

    promise是一个构造函数,是用来解决ajax回调地狱的问题.axios就是用promise封装的.用于解决ajax请求时出现的回调地狱的问题.异步伴随回调. const p1 = new Prom ...

  10. http和tcp/ip,socket的区别

    http协议和tcp/ip协议乍看起来,感觉是同一类的东西,其实不然,下面简单的说说他们的区别. http协议是应用层的一种数据封装协议,类似的还有ftp,telnet等等,而tcp/ip是数据传输层 ...