一.实现原理：

 <!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. Jeecg-Boot 2.0.1 版本发布，前后端分离快速开发平台

    Jeecg-Boot项目简介 Jeecg-boot 是一款基于代码生成器的快速开发平台! 采用前后端分离技术:SpringBoot,Mybatis,Shiro,JWT,Vue & Ant De ...

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

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

  3. 解决IDEA maven多模块打包问题

    参考: https://www.jianshu.com/p/37c6688c4fcb https://blog.csdn.net/sjhuangx/article/details/71519066 h ...

  4. 01.Hibernate快速入门

    第一步:下载Hibernate5的运行环境 https://sourceforge.net/projects/hibernate/files/hibernate-orm/ 第二步:在数据库创建表 Cr ...

  5. java记录CST时间类型的字符串转换问题

    下列代码可以实现把Java的CST格式的时间字符串转为为Date对象和所需要的日期时间格式! String dateStr = "Wed Sep 16 11:26:23 CST 2009&q ...

  6. JavaWeb — Servlet（Server Applet）

    Servlet(Server Applet) 全称Java Servlet,未有中文译文.是用Java编写的服务器端程序.其主要功能在于交互式地浏览和修改数据,生成动态Web内容. 狭义的Servle ...

  7. Django项目: 6.新闻详情页

    一.功能需求分析 1.功能 新闻详情 加载评论功能 添加评论功能 二.新闻详情页 1.业务流程分析 业务流程: 判断前端传递新闻id是否为空,是否为整数,是否存在 2.接口设计 接口说明: 类目 说明 ...

  8. 2018-12-15-VisualStudio-通过-EditorBrowsable-隐藏不开放的属性或方法

    title author date CreateTime categories VisualStudio 通过 EditorBrowsable 隐藏不开放的属性或方法 lindexi 2018-12- ...

  9. 【转载】Linux Examination

    原博地址:https://blog.csdn.net/weixin_42568655/article/details/94603660 (来自我的同学QiaoGuangtong大佬) Fundamen ...

  10. js校验文本框只能输入数字（包括小数）

    form表单 <form method="POST" action=""> <input type="text" id=& ...