<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
*{
margin:0;
padding:0;
}
.box{
width:500px;
margin:100px auto;
overflow:hidden;
}
input{
outline:none;
border:none;
height:30px;
float:left;
}
input[type=text]{
width:80%;
text-align:center;
}
input[type=button]{
width:20%;
color:#fff;
font:400 15px/30px "微软雅黑";
}
ul{
margin-top:35px;
}
ul,li{
list-style:none;
width:100%;
}
li{
background-color:#fff;
border-radius:5px;
margin-bottom:5px;
}
li>span{
display:block;
width:33.3333333%;
height:30px;
line-height:30px;
text-align:center;
float:left;
background:lightblue;
}
</style>
<title>天气预报</title>
</head>
<body bgcolor="#f3f4f5">
<div class="box">
<input type="text" placeholder="请输入你要查询的城市"/>
<input type="button" value="查询"/>
<ul>
</ul>
</div>
</body>
<script type="text/javascript">
$(function(){
var $texts=$("input[type=text]");
var $btn=$("input[type=button]");
var str="";

$texts.on("focus",function(){
$texts.val("").css("color","#aaa");
});
$btn.on("click",function(){
str=$texts.val();
if(str.length>0){
str=encodeURIComponent(str);
$.ajax({
dataType:"jsonp",
type:"get",
url:"http://v.juhe.cn/weather/index?format=2&cityname="+str+"&key=9817f1436de8051a9b635799dcb63f27",
success:function(data){
var data = data.result.future;
console.log(data);
for(var i=0;i<data.length;i++){
var time="<span>"+data[i].date+"</span>";
var temperature="<span>"+data[i].temperature+"</span>";
var weather="<span>"+data[i].weather+"</span>";
var liS="<li>"+time+temperature+weather+"</li>";
$("ul").append(liS);
}
}
});
}else{
$texts.val("WRONG！").css("color","red");
}
});
})

</script>
</html>

结果是这样的：

用ajax查询天气的更多相关文章

  1. 【Python3爬虫】自动查询天气并实现语音播报

    一.写在前面 之前写过一篇用Python发送天气预报邮件的博客,但是因为要手动输入城市名称,还要打开邮箱才能知道天气情况,这也太麻烦了.于是乎,有了这一篇博客,这次我要做的就是用Python获取本机I ...

  2. 5月17 利用AJAX查询数据库

    利用AJAX查询数据 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// ...

  3. Ajax轮询——“定时的通过Ajax查询服务端”

    Ajax轮询——"定时的通过Ajax查询服务端". 概念: 轮询(polling):客户端按规定时间定时像服务端发送ajax请求,服务器接到请求后马上返回响应信息并关闭连接. 百闻 ...

  4. BAE+Python+Django+Wechatpy+Baidu weather api +微信订阅号 = 实现微信查询天气

    最近想在微信上面实现天气查询,分两个步骤: 1.被动回复:输入天气.xx天气获取天气情况 2.主动推送:每天定时推送天气(针对24小时内产生交互的人) 目前已经实现第一个步骤,如下: 现将实现此功能环 ...

  5. TP5结合聚合数据API查询天气

    php根据城市查询天气情况看到有人分享java的查询全国天气情况的代码,于是我想分享一个php版本的查询天气接口.免费查询天气的接口有很多,比如百度的apistore的天气api接口,我本来想采用这个 ...

  6. python 基础例子 双色球 查询天气 查询电话

    # 随机生成双色球import random# 随机数 1-16之间# r = random.randint(1,16)# print(r)phone_numbers_str = "匪警[1 ...

  7. python+tkinter+动画图片+爬虫（查询天气）的GUI图形界面设计

    1.完整代码: import time import urllib.request #发送网络请求,获取数据 import gzip #压缩和解压缩模块 import json #解析获得的数据 fr ...

  8. 通过Azure bot framework composer 设计一个AI对话机器人bot（查询天气）

    本文介绍通过机器人框架设计器 (Bot framework composer)接近拖拉拽的方式设计一个聊天机器人,该聊天机器人的主要功能是发起http请求查询天气.当然,稍微变通下,可以用来查询几乎任 ...

  9. 原生js实现查询天气的小应用

    demo:https://zsqosos.github.io/weather/ 截图: 实现功能:打开网页时显示用户所在城市的天气状况,在输入框输入城市可查询其它城市. 实现过程:先调用百度地图的AP ...

随机推荐

  1. IDDD 实现领域驱动设计－理解限界上下文

    上一篇:<IDDD 实现领域驱动设计-理解领域和子域> <实现领域驱动设计>前两章内容,基本上读完了,和<领域驱动设计>不同的是,它把很多的概念都放在前面进行讲述了 ...

  2. 如何重置硬盘遭到“损坏”的Linux系统root用户密码

    传统印象下Linux是非常坚不可摧的,具有千年不更新,万年不重启的美名.而随着虚拟化的推进,很多跑在虚拟化上的Linux由于先前基础架构的脆弱,变得适应性“越来越不好”,体现在IP存储如果出现节点故障 ...

  3. APP测试入门篇之APP基础知识(001)

    前言        最近两月比较多的事情混杂在一起,静不下心来写点东西,月初想发表一遍接口测试的总结,或者APP测试相关的内容,一晃就月底了,总结提炼一时半会也整不完.放几个早年总结内部培训PPT出来 ...

  4. 成就PHP高手的五个必由之路

    亲们,此文时转载过来的,不是原创!特此说明一下 原文名称:5 ways to be a better php developer原文链接:http://www.developertutorials.c ...

  5. 对 Serializable和Parcelable理解

    1.首先他们两个接口都是为了实现对象的序列化,使之可以传递,所谓序列化就是将对象信息装换成可以存储的介质的过程. 2.Serializable是jdk所提供的序列化接口,该接口存在于io包下,可想用于 ...

  6. elasticsearch高级配置一 ---- 分片分布规则设置

    cluster.routing.allocation.allow_rebalance 设置根据集群中机器的状态来重新分配分片,可以设置为always, indices_primaries_active ...

  7. 【web前端面试题整理08】说说最近几次面试（水）

    为什么换工作 换工作简单来讲一般会归纳为钱不够或者人不对,我们团队氛围很不错,所以基本就定位到钱不够了,而我更多是考虑到以后的职业发展,简单说来就是对以后几年的工作有想法,而这种想法实现不一定能在现在 ...

  8. 中国式商业智能报表ActiveReports免费公开课，10月20日开讲

    ActiveReports公开课全方位报表解决方案,满足商业报表五大需求 [开课时间]10月20日[主讲老师]葡萄城报表产品经理[开课形式]网络在线公开课[活动费用]前50名免费 适合人群:报表开发人 ...

  9. Unable to download data from http://ruby.taobao.org/ & don't have write permissions for the /Library/Ruby/Gems/2.0.0 directory.

    安装cocoapods,记录两个问题! 1.镜像已经替换成了 http://ruby.taobao.org/, 还是不能不能安装cocoapods, 报错:Unable to download dat ...

  10. 获取iPhone手机的UDID和设备名称.

    关于设备名称: iPhone的设备名称也可以在手机上面查看到:设置-通用-关于本机-名称(设备名称是可以自己改的) 关于UUID: 什么?用了iPhone这么久你不知道什么叫UDID! UDID 是由 ...