<!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. 微信SDK开发——接口接入

    园子里面很多关于微信接口开发的文章,Github也一堆的开源代码. 官方文档地址:http://mp.weixin.qq.com/wiki/home/index.html 接下来主要以代码为主,接口说 ...

  2. Jsp的九大对象，七大动作，三大指令

    jsp九大内置对象:1>out 向客户端输出数据,字节流.如out.print(" dgaweyr"); 2>request 接收客户端的http请求.String g ...

  3. QT 删除文件指定目录

    bool deleteDir(const QString &dirName) { QDir directory(dirName); if (!directory.exists()) { ret ...

  4. 文本框focus之后高亮背景颜色

    看效果:Html: CSS: jQuery: 或者使用连写法:

  5. 异步Socket 客户端部分

    using System; using System.Collections.Generic; using System.Text; using System.Net.Sockets; using S ...

  6. 【C#公共帮助类】 WebHelper帮助类

    如果你是一个新手,如果你刚接触MVC,如果你跟着置顶的那个项目,我们肯定会用到这里面的几个帮助类 它们都在Common类库下,大家一定要记住要点:取其精华去其糟粕,切勿拿来主义~ Applicatio ...

  7. 深度｜作为C端应用的代表，成功的陌生社交应用是什么样子的？

    作 为C端应用的代表,成功的陌生社交应用是什么样子的?活跃用户数?收益回报率?在实际社交产品设计中,我们一直为这些所谓的KPI左右,具体到设计行为 上:摆弄相应的界面元素,优化一下文案.页面流,但却很 ...

  8. vcredist_x64.exe vcredist_x86.exe 静默安装方法收集

    vcredist_x64.exe /install /quiet /norestart 更多方法参考如下: http://www.cnblogs.com/lidabo/archive/2013/01/ ...

  9. R语言：常用统计检验

    统计检验是将抽样结果和抽样分布相对照而作出判断的工作.主要分5个步骤: 建立假设 求抽样分布 选择显著性水平和否定域 计算检验统计量 判定 -- 百度百科 假设检验(hypothesis test)亦 ...

  10. java基础1.-------抽象类，抽象方法

    抽象类:抽象类不能实例化,类中的方法必须经过子类的重写实现 类里的方法是public修饰时,子类可重写也可不重写 类的方法是abstract修饰时,方法是抽象方法,子类必须重写该方法 类的方法用fin ...