一.实现原理：

 <!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. JDK源码阅读--Hashtable

    public class Hashtable<K,V> extends Dictionary<K,V> implements Map<K,V>, Cloneable ...

  2. Linux 日期时间命令

    cal : 显示日历 -1 显示一个月的月历 -3 显示系统前一个月,当前月,下一个月的月历 -s  显示星期天为一个星期的第一天,默认的格式 -m 显示星期一为一个星期的第一天 -j  显示在当年中 ...

  3. codeforces 1186E- Vus the Cossack and a Field

    传送门:QAQQAQ 题意:给一个01矩阵A,他的相反矩阵为B,每一次变换都会将原矩阵面积乘4成为: AB BA 矩阵的左上角固定,变换无限次,现有q个询问,即求一个矩阵内的1的个数. 思路:因为反转 ...

  4. highchart接收后台数据用法

    最近做数据分析的时候使用了highchart这个插件,从后台中接收数据的时候出了一些问题,记录下来免得以后忘了. $(function () { var list = {$weeklist}; var ...

  5. Windows API 第14篇 DeleteAndRenameFile

    函数定义:BOOL DeleteAndRenameFile( LPCWSTR lpszDestFile,                                                 ...

  6. HDU 6003 Problem Buyer

    贪心题(好久不做了) 题解 考虑最一般的,判断合法性? 经典贪心问题:左端点升序,左端点相同,右端点降序,c[i]升序 优先队列,每次选择覆盖x的右端点最小的区间. 称此方法为“区间匹配贪心” 最小的 ...

  7. 《数据结构与算法分析——C语言描述》ADT实现(NO.01) : 栈(Stack)

    这次的数据结构是一种特殊的线性表:栈(Stack) 栈的特点是后入先出(LIFO),可见的只有栈顶的一个元素. 栈在程序中的地位非常重要,其中最重要的应用就是函数的调用.每次函数调用时都会创建该函数的 ...

  8. 3.appium定位方法

    1.使用id定位: driver.find_element_by_id('id的名称').click() 2.使用className定位: driver.find_element_by_class_n ...

  9. 洛谷P3296 刺客信条

    题意: 给你一棵树,有两组01权值a[]和b[].n <= 700 你要构造一个自己到自己的映射,使得整棵树的形态不变,且映射后的a[]和映射之前的b[]中不同元素尽量少. 解: 发现这个整棵树 ...

  10. 【html、CSS、javascript-1】html基础

    HTML   翻译成代码如下: web: import socket def handle_request(client): buf = client.recv(1024) client.sendal ...