Ajax--art-template + 调用天气接口
一.实现原理：
<!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 + 调用天气接口的更多相关文章
- php 调用天气接口
前几天没事的时候,浏览博客看到了一篇免费天气接口的文章,然后调用了一下文章中提到的接口,自己琢磨了半天,把数据处理了一下,虽然现在用不到,但是说不定以后会用,所以打算记录一下,毕竟这也算是自己第一次在 ...
- 利用C++调用天气webservice-gSOAP方法
首先需要下载一个gSOAP工具包 下载路径为:https://sourceforge.NET/projects/gsoap2/ 至于有关于gSOAP的一些用法和包含的文件的说明可从官网查看:http: ...
- c#代码 天气接口 一分钟搞懂你的博客为什么没人看 看完python这段爬虫代码，java流泪了c#沉默了 图片二进制转换与存入数据库相关 C#7.0--引用返回值和引用局部变量 JS直接调用C#后台方法（ajax调用） Linq To Json SqlServer 递归查询
天气预报的程序.程序并不难. 看到这个需求第一个想法就是只要找到合适天气预报接口一切都是小意思,说干就干,立马跟学生沟通价格. 不过谈报价的过程中,差点没让我一口老血喷键盘上,话说我们程序猿的人 ...
- 三界商城 ajax调用城市接口,竟然需要登录,调用的接口需要登录,如果不登录 重定向到登录
现象 商家入驻 填写信息的 ajax请求没有数据 network->name-headers 返回302 发现调用的接口,需要登录,否则重定向登录 //初始化用户信息查询 public func ...
- thinkjs学习-this.assign传递数据和ajax调用后台接口
在页面加载时,就需要显示在页面上的数据,可以在后台使用this.assign赋值,在前台通过ejs等模板获取:用户点击按钮,或者触发某些事件和后台进行交互时,就需要用到ajax调用后台接口.本文通过一 ...
- PHP调用API接口实现天气查询功能
天气预报查询接口API,在这里我使用的是国家气象局天气预报接口 使用较多的还有:新浪天气预报接口.百度天气预报接口.google天气接口.Yahoo天气接口等等. 1.查询方式 根据地名查询各城市天气 ...
- Ajax异步调用http接口后刷新页面
使用Ajax的目的就是提高页面响应速度,无需同步调用,无需整个页面刷新.这里直接在html中使用js来实现: 先获取XMLHttpRequest对象 var xmlHttp; //创建一个xmlHtt ...
- Ajax调用WebService接口样例
在做手机端h5的应用时,通过Ajax调用http接口时没啥问题的:但有些老的接口是用WebService实现的,也来不及改成http的方式,这时通过Ajax调用会有些麻烦,在此记录具体实现过程.本文使 ...
- 实现简单的PHP接口，以及使用js/jquery ajax技术调用此接口
主要介绍下如何编写简单的php接口,以及使用js/jquery的ajax技术调用此接口. Php接口文件(check.php): <?php $jsonp_supporter = $_GET[‘ ...
随机推荐
- Java 常用正则表达式
一. 只能输入数字:"^[0-9]*$".只能输入n位的数字:"^\d{n}$".只能输入至少n位的数字:"^\d{n,}$".只能输入m~ ...
- Redis系列一之《Redis设计与实践》整体观感
笔者别的Redis方面的书没有读过,读完这一本,力荐,作者黄建宏,对Redis不太熟悉的,但是对编程稍微有些基础的,全部 读下来应该无压力.作者的编写和讲解非常详细,覆盖的面基本上都讲到,之前一直都是 ...
- yii2-user 一个好用的用户扩展
最近使用yii2做了一个系统,涉及到了用户登录等等,之前是自己写的一套,后来要添加邮箱验证功能.有点懒,然后看到了yii2-user这个扩展.简单说下,毕竟自己研究也不深. http://yii2-u ...
- mapduce简介
原文引自:http://www.cnblogs.com/shishanyuan/p/4639519.html 1.环境说明 部署节点操作系统为CentOS,防火墙和SElinux禁用,创建了一个shi ...
- 2019-6-14-WPF-shows-that-some-windows-in-multithreading-will-be-locked-in-the-PenThreadWorker-constr...
title author date CreateTime categories WPF shows that some windows in multithreading will be locked ...
- [CQOI2009]叶子的染色【性质+树形Dp】
Online Judge:Bzoj1304,Luogu P3155 Label:无根树,树形Dp 题目描述 给定一棵\(N\)个节点的无根树,它一共有\(K\)个叶子节点.你可以选择一个度数大于1的节 ...
- Windows API 第21篇 DeleteVolumeMountPoint 删除挂载点
函数原型:BOOL DeleteVolumeMountPoint( LPCTSTR lpszV ...
- 工控安全入门（七）—— plc的网络
上一篇我们详细分析了bootram和Vxworks的基本启动流程,这篇文章中我们把视线转到plc的网络部分,同时来复现我们第一个.第二个工控安全漏洞. VxWorks的网络设备驱动 一般我们说有三种设 ...
- springboot核心技术(四)-----Docker、数据访问、自定义starter
Docker 1.简介 Docker是一个开源的应用容器引擎:是一个轻量级容器技术: Docker支持将软件编译成一个镜像:然后在镜像中各种软件做好配置,将镜像发布出去,其他使用者可以直接使 用这个镜 ...
- java求1000以内的水仙花数
水仙花数是指一个 n 位数 ( n>=3 ),它的每个位上的数字的 n 次幂之和等于它本身.(例如:1^3 + 5^3 + 3^3 = 153) 三位的水仙花数共有4个,分别为:153.370. ...