<!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. Ubuntu 下安装QT

    Ubuntu 下安装QT 本文使用的环境 QT Library: qt-everywhere-opensource-src-4.7.4.tar.gz QT Creator: qt-creator-li ...

  2. Vertica集群单节点宕机恢复方法

    Vertica集群单节点宕机恢复方法 第一种方法: 直接通过admintools -> 5 Restart Vertica on Host 第二种方法: 若第一种方法无法恢复,则清空宕机节点的c ...

  3. C#中的委托解析

    谈及到C#的基本特性,“委托”是不得不去了解和深入分析的一个特性.对于大多数刚入门的程序员谈到“委托”时,都会想到“将方法作为方法的参数进行传递”,很多时候都只是知道简单的定义,主要是因为“委托”在理 ...

  4. 一个可随意定位置的带色Toast——开源代码Crouton的简单使用

    今天在公司要求的代码中,要求显示的提示能够更加具有多样化,而不是简单的Toast字样,第一想法肯定是自定义View呀,结果在浏览中发现还有这样的一个开源代码——Crouton. 几经折腾,发现这个东西 ...

  5. Python基础（三）

    本章内容: 深浅拷贝 函数(全局与局部变量) 内置函数 文件处理 三元运算 lambda 表达式 递归(斐波那契数列) 冒泡排序 深浅拷贝 一.数字和字符串 对于 数字 和 字符串 而言,赋值.浅拷贝 ...

  6. 用Crontab打造简易工作流引擎

    1. 引言 众所周知,Oozie(1, 2)是基于时间条件与数据生成来做工作流调度的,但是Oozie的数据触发条件只支持HDFS路径,故而面临着这样的问题: 无法判断Hive partition是否已 ...

  7. ASP.Net MVC Session和Cookies的简单使用

    目标:用Session和Cookies实现登陆信息保存和展现 Cookies实现: Controller: //把登陆用户名存到cookies中 HttpCookie cook = new HttpC ...

  8. StackExchange.Redis帮助类解决方案RedisRepository封装（基础配置）

    本文版权归博客园和作者吴双本人共同所有,转载和爬虫,请注明原文地址.http://www.cnblogs.com/tdws/p/5815735.html 写在前面 这不是教程,分享而已,也欢迎园友们多 ...

  9. 【无私分享：ASP.NET CORE 项目实战（第七章）】文件操作 FileHelper

    目录索引 [无私分享:ASP.NET CORE 项目实战]目录索引 简介 在程序设计中,我们很多情况下,会用到对文件的操作,在 上一个系列 中,我们有很多文件基本操作的示例,在Core中有一些改变,主 ...

  10. Lightbox改造——支持滚轮缩放

    在做文章类型的web页时,经常会遇到要点开看大图的需求,LightBox2则是在众多产品中比较优秀的一款Jquery插件.配置就不细说了,今天我主要要分享的是:如何在点开大图后,可以通过鼠标滚轮来缩放 ...